Question

如何将类应用于bootstrap切换元素？

我有以下内容：

<ul class="my-nav ">
     <li >
         <a data-toggle="collapse" href="#one" aria-expanded="false" aria-controls="one" class="collapsed">
               ...
         </a>
     </li>
     <li >
         <a data-toggle="collapse" href="#two" aria-expanded="false" aria-controls="two" class="collapsed">
               ...
         </a>
     </li>
</ul>

<div class="collapse my-pane" id="one">
     <ul >
          <li ><a href="#">...</a></li>
          <li ><a href="#">...</a></li>
     </ul>
</div> 

<div class="collapse my-pane" id="two">
     <ul >
          <li ><a href="#">...</a></li>
          <li ><a href="#">...</a></li>
     </ul>
</div>

当我使用#one切换链接时，我会将以下css应用于它：

<li >
     <a data-toggle="one" href="#one" aria-expanded="true" aria-controls="one" class="">
               ...
     </a>
</li>

现在我想在它活动时应用一些背景颜色。如何使用JQuery将以下css应用于选定的<li>：

.my-nav li.my-nav-selected a {
    background-color: background-color: #dae1f3;
 }

Answer 1

你不需要javascript，你可以用CSS做到这一点

.my-nav li a[aria-expanded="true"]{
    background-color: #dae1f3; 
}

http://jsfiddle.net/9tt7dgz9/

Answer 2

从你的代码我可以假设你使用Bootstrap如果我没错。如果是这种情况，您可以使用Bootstrap本身的回调函数。

$('#myCollapsible').on('hidden.bs.collapse', function () {
   // do something…
})

您也可以登陆Bootstrap JS demo page

如果不是Bootstrap，那么你可以试试

$('.my-nav li a.collapsed').on('click', function(e){
    $('.my-nav li').removeClass('my-nav-selected');
    $(this).parents('li').addClass('my-nav-selected');
});

希望，这会有所帮助！

JQuery将CSS类应用于Toggled Element

2 个答案: