<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="col-xs-3"> <ul id="left_bar" class="list-unstyled"> <li class="panel"> <a href="#" data-toggle="collapse" data-target="#left_bar1" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Aquafine UV</a> <ul id="left_bar1" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false"> <li><a href="#">OSPREY</a></li> <li><a href="#">GREGORY</a></li> <li><a href="#">SALOMON</a></li> <li><a href="#">BOLANG</a></li> </ul> </li> <li class="panel"> <a href="#" data-toggle="collapse" data-target="#left_bar2" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Filtrafine 濾殼</a> <ul id="left_bar2" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false"> <li><a href="#">Canavan 雪靴/襪子</a></li> </ul> </li> <li class="panel"> <a href="#" data-toggle="collapse" data-target="#left_bar3" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Filtrafine 濾心</a> <ul id="left_bar3" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false"> <li><a href="#">折疊濾心</a></li> <li><a href="#">活性碳濾心</a></li> <li><a href="#">熔噴濾心</a></li> <li><a href="#">纏繞濾心</a></li> <li><a href="#">膠囊濾心</a></li> <li><a href="#">薄膜濾心</a></li> </ul> </li> <li class="panel"> <a href="#" data-toggle="collapse" data-target="#left_bar4" data-parent="#left_bar" alt="+" class="collapsed" aria-expanded="false">Filtrafine 濾袋</a> <ul id="left_bar4" class="list-unstyled collapse" style="margin-left: 1em; height: 0px;" aria-expanded="false"> <li><a href="#">Wind 風之旅者</a></li> <li><a href="#">Kius 高仕</a></li> <li><a href="#">Mascot</a></li> <li><a href="#">Uncle bear</a></li> <li><a href="#">熊叔叔</a></li> </ul> </li> </ul> </div> </div>

#left_bar > li{ margin-bottom: 10px; font-size: 17px; position: relative; } #left_bar li a{ color: #535353; width: 100%; } #left_bar li a:hover, #left_bar li a:active, #left_bar li a:focus{ color: #9a1e23; text-decoration: none; } #left_bar > li > a:after{ content: attr(alt); color: #000; position: absolute; right: 0; top: 0; } .left_mune_active { color: #9a1e23 !important; text-decoration: none; } .sidebar_detail:after{ content: '+'; color: #000; position: absolute; right: 0; top: 0; padding: 5px 10px; } a.sidebar_detail:active:after, a.sidebar_detail:focus:after { content: '-'; } .panel { margin: 0; border: 0px; box-shadow: 0 1px 1px rgba(0,0,0,.0); }

$('a[data-toggle="collapse"]').click(function(){ $('a[data-toggle="collapse"]').each(function(){ $(this).attr('alt','+'); $(this).removeClass('left_mune_active'); }); var _selecter = $(this).attr('data-target'); var _css = $(_selecter).attr('class'); var _ans = _css.indexOf('in'); if( _ans == -1){ $(this).attr('alt','-'); $(this).addClass('left_mune_active'); }else{ $(this).attr('alt','+'); $(this).removeClass('left_mune_active'); } });