使用引導程序和jQuery創建具有下拉列表的導航欄

對不起，如果此問題之前已被詢問，但無法找到直接答案。使用引導程序和jQuery創建具有下拉列表的導航欄

我是新來的CSS和jQuery，我試圖創建一個菜單和子菜單的導航欄，並使用下拉菜單打開每個個人菜單。

這可能是一個父母/孩子isuue，但我不知道如何選擇一個菜單下拉使用jQuery，因爲現在所有菜單打開懸停。

我在做什麼錯？感謝你的幫助！

HTML：

<div class="menu"> 
    <div class="container"> 
     <ul> 
      <li class="dropdown"> 
       <a href=# class="dropdown-toggle" data-toggle="dropdown">menu1</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">sub menu1</a></li> 
        <li><a href="#">sub menu2</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href=# class="dropdown-toggle" data-toggle="dropdown">menu2</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">sub menu1</a></li> 
        <li><a href="#">sub menu2</a></li> 
       </ul> 
      </li> 
      <li class="dropdown"> 
       <a href=# class="dropdown-toggle" data-toggle="dropdown">menu3</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">sub menu1</a></li> 
        <li><a href="#">sub menu2</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div>

的jQuery：

var main = function() { 

$('.dropdown-toggle').hover(function() { 
    $('.dropdown-menu').toggle(); 
}); }$(document).ready(main);

來源

2015-06-17 Bar Margalit

通過書寫

$('.dropdown-menu').toggle();

您的目標是匹配選擇器的所有元素 - 所有下拉菜單。

你需要做的是：

var main = function() { 
    $('.dropdown-toggle').hover(function() { 
     $(this).parent().find('.dropdown-menu').toggle(); 
    }); 
}; 
$(document).ready(main);

所以我們首先選擇盤旋元素（$(this)），再遊了DOM樹<li class="dropdown">（.parent()），並在其中我們發現.dropdown菜單（ .find('.dropdown-menu')）。

此外，請考慮將函數綁定到<li class="dropdown">。這樣，當您在<ul class="dropdown-menu">上移動鼠標時，菜單不會消失。這是因爲當你翱翔<ul class="dropdown-menu">時，你也將鼠標懸停在其父母<li class="dropdown">上，並且你可能不希望隱藏子菜單，只是因爲你沒有將菜單標題懸停。

一個備註，但很重要：請不要忘記將aria-haspopup="true"添加到您的<li class="dropdown">元素中，以增強輔助功能和觸控支持。

來源

2015-06-17 20:07:33

我想通了，所有的元素目標的一部分，但不知道如何選擇一個元素。工作，謝謝！ –

添加代碼與解釋:) –

這也將確保您的下拉不會消失，直到他們真正離開主.dropdown李

var main = function() { 

$('.dropdown').hover(function() { 

    //on hover 
    $('.dropdown-menu', this).toggle(); 
}, function() { 

    //on mouseout 
    $('.dropdown-menu', this).toggle(); 
}); }$(document).ready(main);

來源

2015-06-17 20:06:42

這應該指向你在正確的方向

DEMO。

<!-- Parent Menu --> 
<ul class="dropdown-menu" id="parentMenu" 
    role="menu" aria-labelledby="dropdownMenu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 

    <!-- Child Menu --> 
    <li class="dropdown-submenu"> 
     <a tabindex="-1" href="#">More options</a> 
     <ul class="dropdown-menu"> 
      <li><a tabindex="-1" href="#">Second level</a></li> 

      <!-- Grandchild Menu --> 
      <li class="dropdown-submenu"> 
       <a href="#">More..</a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">3rd level</a></li> 
        <li><a href="#">3rd level</a></li> 
       </ul> 
      </li> 

      <li><a href="#">Second level</a></li> 
      <li><a href="#">Second level</a></li> 
     </ul> 
    </li> 
</ul>

如果你不想讓它開始顯示，直到點擊;只需display:none;在菜單包裝的CSS。然後創建一個點擊功能來顯示。

$("#clickme").click(function() { 
    $("#parentMenu").show("slow", function() { 
    // Animation complete. 
    }); 
});

和：

<div id="clickme">Wanna see me cool menu?</div> 
<!-- full menu mark up below here -->

來源

2015-06-17 20:08:59

使用引導程序和jQuery創建具有下拉列表的導航欄

回答

相關問題