카카오톡
708
2019-02-11 18:20:13 작성 2019-02-11 18:23:49 수정됨
6
367

부트스트랩3 클릭시 색상이 자동변경되는 현상 없애기 질문드립니다.


현재 트리 형태의 사이드 바를 사용하고 있습니다.

부득이하게 부트스트랩 버전을 3.3 버전을 사용하여야만 합니다.

4버전부터는 정상적으로 클릭시에도 색상이 변경되지 않습니다.


현상은 아래와 같습니다.


li인 MENU GROUP l 을 클릭 시  


아래와 같이 색상이 변경됩니다.

css에서 on color나 active컬러를 변경해주어도 반응이 없습니다 어떤걸 바꿔줘야 할까요 ..?


html

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/3.3.0/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">
	<div class="row">
		<div id="left" class="span3">
            <ul id="menu-group-1" class="nav menu">  
                <li class="item-1 deeper parent active">
                    <a class="" href="#">
                        <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign"><i class="icon-plus icon-white"></i></span>
                        <span class="lbl">Menu Group i</span>                      
                    </a>
                    <ul class="children nav-child unstyled small collapse" id="sub-item-1">
                        <li class="item-2 deeper parent active">
                            <a class="" href="#">
                                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-2" class="sign"><i class="icon-plus icon-white"></i></span>
                                <span class="lbl">Menu 1</span> 
                            </a>
                            <ul class="children nav-child unstyled small collapse" id="sub-item-2">
                                <li class="item-3 current active">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 1.1</span> (current menu)
                                    </a>
                                </li>
                                <li class="item-4">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 1.2</span> 
                                    </a>
                                </li>                                
                            </ul>
                        </li>
                        <li class="item-5 deeper parent">
                            <a class="" href="#">
                                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-5" class="sign"><i class="icon-plus icon-white"></i></span>
                                <span class="lbl">Menu 2</span> 
                            </a>
                            <ul class="children nav-child unstyled small collapse" id="sub-item-5">
                                <li class="item-6">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 2.1</span>                                    
                                    </a>
                                </li>
                                <li class="item-7">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 2.2</span>                                    
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li class="item-8 deeper parent">
                    <a class="" href="#">
                        <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-8" class="sign"><i class="icon-plus icon-white"></i></span>
                        <span class="lbl">Menu Group ii</span>                      
                    </a>
                    <ul class="children nav-child unstyled small collapse" id="sub-item-8">
                        <li class="item-9 deeper parent">
                            <a class="" href="#">
                                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-9" class="sign"><i class="icon-plus icon-white"></i></span>
                                <span class="lbl">Menu 1</span> 
                            </a>
                            <ul class="children nav-child unstyled small collapse" id="sub-item-9">
                                <li class="item-10">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 1.1</span>
                                    </a>
                                </li>
                                <li class="item-11">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 1.2</span> 
                                    </a>
                                </li>                                
                            </ul>
                        </li>
                        <li class="item-12 deeper parent">
                            <a class="" href="#">
                                <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-12" class="sign"><i class="icon-plus icon-white"></i></span>
                                <span class="lbl">Menu 2</span> 
                            </a>
                            <ul class="children nav-child unstyled small collapse" id="sub-item-12">
                                <li class="item-13">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 2.1</span>                                    
                                    </a>
                                </li>
                                <li class="item-14">
                                    <a class="" href="#">
                                        <span class="sign"><i class="icon-play"></i></span>
                                        <span class="lbl">Menu 2.2</span>                                    
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>    			
            </ul>          
		</div>
	</div>
</div>


js

!function ($) {
    
    // Le left-menu sign
    /* for older jquery version
    $('#left ul.nav li.parent > a > span.sign').click(function () {
        $(this).find('i:first').toggleClass("icon-minus");
    }); */
    
    $(document).on("click","#left ul.nav li.parent > a > span.sign", function(){          
        $(this).find('i:first').toggleClass("icon-minus");      
    }); 
    
    // Open Le current menu
    $("#left ul.nav li.parent.active > a > span.sign").find('i:first').addClass("icon-minus");
    $("#left ul.nav li.current").parents('ul.children').addClass("in");

}(window.jQuery);



css

/* MENU-LEFT
-------------------------- */
/* layout */
#left ul.nav {
    margin-bottom: 2px;
    font-size: 12px; /* to change font-size, please change instead .lbl */
}
#left ul.nav ul,
#left ul.nav ul li {
    list-style: none!important;
    list-style-type: none!important;
    margin-top: 1px;
    margin-bottom: 1px;
}
#left ul.nav ul {
    padding-left: 0;
    width: auto;
}
#left ul.nav ul.children {
    padding-left: 12px;
    width: auto;
}
#left ul.nav ul.children li{
    margin-left: 0px;
}
#left ul.nav li a:hover {
    text-decoration: none;
}

#left ul.nav li a:hover .lbl {
    color: #999!important;
}

#left ul.nav li.current>a .lbl {
    background-color: #999;
    color: #fff!important;
}

/* parent item */
#left ul.nav li.parent a {
    padding: 0px;
    color: #ccc;
}
#left ul.nav>li.parent>a {
    border: solid 1px #999;
    text-transform: uppercase;
}    
#left ul.nav li.parent a:hover {
    background-color: #fff;
    -webkit-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);
    -moz-box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);
    box-shadow:inset 0 3px 8px rgba(0,0,0,0.125);    
}

/* link tag (a)*/
#left ul.nav li.parent ul li a {
    color: #222;
    border: none;
    display:block;
    padding-left: 5px;    
}

#left ul.nav li.parent ul li a:hover {
    background-color: #fff;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    box-shadow:none;  
}

/* sign for parent item */
#left ul.nav li .sign {
    display: inline-block;
    width: 14px;
    padding: 5px 8px;
    background-color: transparent;
    color: #fff;
}
#left ul.nav li.parent>a>.sign{
    margin-left: 0px;
    background-color: #999;
}

/* label */
#left ul.nav li .lbl {
    padding: 5px 12px;
    display: inline-block;
}
#left ul.nav li.current>a>.lbl {
    color: #fff;
}
#left ul.nav  li a .lbl{
    font-size: 12px;
}

/* THEMATIQUE
------------------------- */
/* theme 1 */
#left ul.nav>li.item-1.parent>a {
    border: solid 1px #ff6307;
}
#left ul.nav>li.item-1.parent>a>.sign,
#left ul.nav>li.item-1 li.parent>a>.sign{
    margin-left: 0px;
    background-color: #ff6307;
}
#left ul.nav>li.item-1 .lbl {
    color: #ff6307;
}
#left ul.nav>li.item-1 li.current>a .lbl {
    background-color: #ff6307;
    color: #fff!important;
}

/* theme 2 */
#left ul.nav>li.item-8.parent>a {
    border: solid 1px #51c3eb;
}
#left ul.nav>li.item-8.parent>a>.sign,
#left ul.nav>li.item-8 li.parent>a>.sign{
    margin-left: 0px;
    background-color: #51c3eb;
}
#left ul.nav>li.item-8 .lbl {
    color: #51c3eb;
}
#left ul.nav>li.item-8 li.current>a .lbl {
    background-color: #51c3eb;
    color: #fff!important;
}

/* theme 3 */
#left ul.nav>li.item-15.parent>a {
    border: solid 1px #94cf00;
}
#left ul.nav>li.item-15.parent>a>.sign,
#left ul.nav>li.item-15 li.parent>a>.sign{
    margin-left: 0px;
    background-color: #94cf00;
}
#left ul.nav>li.item-15 .lbl {
    color: #94cf00;
}
#left ul.nav>li.item-15 li.current>a .lbl {
    background-color: #94cf00;
    color: #fff!important;
}

/* theme 4 */
#left ul.nav>li.item-22.parent>a {
    border: solid 1px #ef409c;
}
#left ul.nav>li.item-22.parent>a>.sign,
#left ul.nav>li.item-22 li.parent>a>.sign{
    margin-left: 0px;
    background-color: #ef409c;
}
#left ul.nav>li.item-22 .lbl {
    color: #ef409c;
}
#left ul.nav>li.item-22 li.current>a .lbl {
    background-color: #ef409c;
    color: #fff!important;
}

0
0
  • 답변 6

  • joy
    654
    2019-02-12 16:10:24

    아래 셋중에 하나 선택해서 사용하면 됩니다


    [CSS]

    .span3 > ul > li > a {
     background-color: #ffffff !important;
    }


    [직접 스타일 기입]

    <a class="" href="#" style="background-color:white">
     <span data-toggle="collapse" data-parent="#menu-group-1" href="#sub-item-1" class="sign"><i class="icon-plus icon-white"></i></span>
     <span class="lbl">Menu Group i</span>                     
    </a>


    [자바스크립트]

    $(document).on("click",".span3 > ul > li > a", function(){         
     $(this).css('background-color', 'white');
    });


    0
  • 카카오톡
    708
    2019-02-12 16:36:32 작성 2019-02-12 16:40:19 수정됨

    조이님 답변감사합니다.

    현재 마우스오버시 색상이 변경되며, 기본색상도 그레디언트로 변경하여 색상을 주지못하고

    마우스 클릭 이벤트가 발생 시 transparent 로 변경하여 회색으로 변경되던 현상은 해결하였습니다.

    감사합니다.

    그런데 기존제 있던 마우스 오버 시 색상 변경 까지  transparent 로 변경되는 현상이 생겨

    마우스 오버시에만 원하는 색상으로 변경 하게 하려고 하려면 어떻게 해주어야 할까요 ? 


    $(document).on("click",".span3 > ul > li > a", function(){          

    $(this).css('background-color', 'transparent');

    });

    $(document).on("mouseover",".span3 > ul > li > a:hover", function(){          

    $(this).css('background-color', 'white');

    });


    0
  • joy
    654
    2019-02-12 16:44:35

    이렇게 하면 되지 않을까요?


    .span3 > ul > li > a {
     background-color: #ffffff !important;
    }

    .span3 > ul > li > a:hover {
     background-color: yellow !important;
    }




    0
  • 카카오톡
    708
    2019-02-12 16:50:34 작성 2019-02-12 16:52:17 수정됨

    다시 답변감사합니다.

    잠깐사이에

    $(document).on("click",".span3 > ul > li > a", function(){          

    $(this).css('background-color', 'transparent');

    });


    $(document).on("mouseover",".span3 > ul > li > a", function(){          

    $(this).css('background-color', 'white');

    });

    $(document).on("mouseout",".span3 > ul > li > a", function(){          

    $(this).css('background-color', 'transparent');

    });


    이런식으로 해봤습니다.

    클릭시 투명화

    마우스 오버시 하얀색

    마우스 다운시 다시 투명화

    이런식으로 했는데 css해주신것과 차이가 있을까요 



    문제는 해결되었습니다 .

    정말감사합니다(__)

    0
  • joy
    654
    2019-02-12 16:55:05

    상관 없습니다만

    될수있으면 css 는 css로 해결하고 부득이할때 jquery로 구현하는게

    유지보수 차원에서도 낫지 않을까 합니다

    0
  • 카카오톡
    708
    2019-02-12 16:57:23

    그렇군요 . !

    수정해 보았습니다.

    덕분에 배워갑니다.

    .span3 > ul > li > a {

     background-color: transparent !important;

    }


    .span3 > ul > li > a:hover {

     background-color: white !important;

    }

    .span3 > ul > li > a:active {

     background-color: white !important;

    }

    .span3 > ul > li > a:deactive {

     background-color: transparent !important;

    }

    0
  • 로그인을 하시면 답변을 등록할 수 있습니다.