jquery導航菜單div下拉列表

我試圖讓您點擊兩個導航鏈接（僅鏈接1和鏈接3）時下拉。到目前爲止，我只能通過點擊導航塊（'.navBox'）使其下降。我怎樣才能通過href ...鏈接呢？請幫助..jquery導航菜單div下拉列表

HTML/jQuery的：

$(document).ready(function(){ 
    $('.navBox').toggle(function(){ 
     $('.lowerContainer').slideDown(); 
    }, function(){ 
     $('.lowerContainer').slideUp(); 
    }); 
}); 

<div id="header"> 
    <div class="wrapper"> 
     <div class="logoBox"> 
       Logo 
     </div> 
     <div class="navBox"> 
      <ul> 
       <li><a href="#">Link 1</a></li> 
       <li><a href="#">Link 2</a></li> 
       <li><a href="#">Link 3</a></li> 
       <li><a href="#">Link 4</a></li> 
       <li><a href="#">Link 5</a></li> 
      </ul> 
     </div> 
    </div> 
</div> 
<div class="lowerContainer" style="display: none;"> 
    <div class="lowerWrapper"> 
     <div id="boxed"> 
     </div> 
    </div> 
</div> 
<div class="mainContent"> 
    <div class="contentArea"> 
     <div class="sportsIcons"> 
      <div id="boxed"> 
      </div> 
     </div> 

    </div> 
</div> 
    <br/> 
    <div class="line"> 
    </div> 

</div>

來源

2012-07-03 Oli Olivier

最好的辦法：給那些鏈接類，並選擇它們。

一種方法來與您當前的DOM結構，工作原理：

$('div.navBox a').filter(function(){ 
    return this.innerHTML == "Link 1" && 
      this.innerHTML == "Link 3"; 
}).whatYouWant();

來源

2012-07-03 00:15:30 gdoron

你什麼意思通過innerHTML的多少？ –

@OliOlivier。這就是' ...'這種情況'...' – gdoron

是：

Link 1

或只是href =「＃」>鏈接1 –

使用$（「navBox UL李一。」），或給的鏈接類的名稱，並使用它。

來源

2012-07-03 00:15:45 dezman

這似乎工作，但在所有鏈接，而不是特定的鏈接（鏈接1和鏈接2）無論如何，我通過這兩個特定的鏈接？ –

$('a:contains("Link 1"), a:contains("Link 3")', '.navBox').on('click', function(e){ 
    e.preventDefault(); 
    $('.lowerContainer').slideToggle(); 
});

來源

2012-07-03 00:22:16 adeneo

你可以重新排列你的標記，所以你有：

<ul> 
    <li> 
     <a href="#">menu item</a> 
     <div>Dropdown</div> 
    </li> 
    <li> 
     <a href="#">menu item</a> 
     <div>Dropdown</div> 
    </li> 
</ul>

，你可以解決它這樣做：

$('ul li a').click(function() { 
    $(this).next().show(); 
});

來源

2012-07-03 03:19:59 Chad

jquery導航菜單div下拉列表

回答

相關問題