Question

我正在为菜单使用bootstrap 3折叠功能的变体，我正在尝试将活动样式应用于内容打开且可见的导航项。

我的想法是挂钩'panel-collapse'，其类也设置为“in”，这是通过使用锚标记href在其中设置的id应用于活动可见面板的类。导航。

我很难搞清楚如何挂钩活动面板的id以将活动类应用回正确的导航项。

    <nav>
      <div id="group-sub-nav-list">
        <ul>
          <li><a class="nav-sub-menu" href="#vbs-programs-menu" data-toggle="collapse" data-parent="#sub-nav-menus" aria-expanded="false" aria-controls="vbs-programs-menu">VBS Programs</a></li>
          <li><a href="/vbs/tools">Tools</a></li>
        </ul>
      </div>
    </nav>
    <div id="sub-nav-menus" role="tablist" aria-multiselectable="true">
      <div class="panel-collapse collapse" role="tabpanel" id="shop-vbs-menu"> </div>
      <div class="panel-collapse collapse" role="tabpanel" id="vbs-programs-menu"> </div>
    </div>

Answer 1

如果您正在尝试添加一个类，并希望使用jQuery来更改类，请单击使用：

$(document).ready(function(){
    $('.nav-sub-menu').click(function(){
        ('.nav-sub-menu').toggleClass('panel-collapse')
    })

})

将活动类应用于其href设置为另一个元素的id的导航项

1 个答案: