使用jQuery和導航列表

我使用的是Bootstrap 2.3，如果選擇了父項li，我試圖刪除nav-list的隱藏類。我無法弄清楚的是如何識別nav-list的父母li。例如，當父級設置爲活動狀態時，我希望看到要顯示的嵌套nav列表。使用jQuery和導航列表

下面是代碼示例，以幫助解釋我想要做的事：

<div class="span3"> 
    <div class="well sidebar-nav"> 
     <ul class="nav nav-list"> 
      <li class="nav-header"><a href="/dealer/home">Main</a></li> 
     </ul> 
     <ul class="nav nav-list"> 
      <li><a href="/dealer/">Parent Page</a></li> 
       <ul class="nav nav-list hide"> 
        <li><a href="#1">child page 1</a></li> 
        <li><a href="#2">child page 2</a></li> 
        <li><a href="#3">child page 3</a></li> 
       </ul> 
      <li><a href="/dealer2/">Parent Page 2</a></li> 
       <ul class="nav nav-list hide"> 
        <li><a href="#1">child page 1</a></li> 
        <li><a href="#2">child page 2</a></li> 
        <li><a href="#3">child page 3</a></li> 
       </ul> 
      <li><a href="/dealer3/">Parent Page 3</a></li> 
       <ul class="nav nav-list hide"> 
        <li><a href="#1">child page 1</a></li> 
        <li><a href="#2">child page 2</a></li> 
        <li><a href="#3">child page 3</a></li> 
       </ul> 
     </ul> 
    </div> 
</div> 

<script> 
    $(document).ready(function() { 
     $('nav a[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active'); 
    }); 
</script>

來源

2014-07-22 dbollig

當父頁面「設置爲主動」，它是否也會收到類名？如.active？ –

是的，例如

Parent Page

– dbollig

這應該是你在找什麼使用您提供的標記：

$('ul.nav li.active').next('ul').removeClass('hide');

但是，您的你的列表的HTML格式不正確，你應該有一些東西（注意關於「父頁面」關閉li的變化）：

<ul class="nav nav-list"> 
    <li><a href="/dealer/">Parent Page</a> 
     <ul class="nav nav-list hide"> 
      <li><a href="#1">child page 1</a></li> 
      <li><a href="#2">child page 2</a></li> 
      <li><a href="#3">child page 3</a></li> 
     </ul> 
    </li> 
</ul>

如果您更正的標記是什麼上面，那麼JS變爲：

$('ul.nav li.active').children('ul').removeClass('hide');

和使用提供的代碼以供參考codepen：

http://codepen.io/chase_hubbard/pen/jvqKx

來源

2014-07-22 15:36:09

使用jQuery和導航列表

回答

相關問題