所有子菜單在點擊時顯示

Question

我想僅顯示點擊時點擊li和子按鈕的子菜單。目前，點擊和顯示和隱藏功能正在工作，但下面的代碼在點擊時顯示了兩個子菜單，我只需要li按鈕的子子菜單顯示點擊。

<ul id="menu-main-menu" class="nav-menu"> 
    <li class="menu-item"><a href="#">Menu link</a> 
    <button aria-expanded="false" class="dropdown-toggle"></button> 
     <ul class="sub-menu"> 
      <li class="menu-item"><a href="link1.htm">link1</a></li> 
      <li class="menu-item"><a href="link2.htm">link1</a></li> 
     </ul> 
    </li> 
    <li class="menu-item"><a href="#">Menu link 2</a> 
    <button aria-expanded="false" class="dropdown-toggle"></button> 
     <ul class="sub-menu"> 
      <li class="menu-item"><a href="link1.htm">link1</a></li> 
      <li class="menu-item"><a href="link2.htm">link1</a></li> 
     </ul> 
    </li> 
</ul> 
<div class="site-content"></div> 

的jQuery：

jQuery(document).ready(function ($) { 
    $("#menu-main-menu").on('click', 'button', function (event) { 
     $('ul.sub-menu').appendTo('.site-content'); 
     if($('ul.sub-menu:visible').length) 
      $('ul.sub-menu').hide(); 
     else 
      $('ul.sub-menu').show(); 
    }); 
    }); 

CSS：

#menu-main-menu ul.sub-menu { 
    display: none; 
} 

ul.sub-menu { 
    display: none; 
    position: absolute; 
    z-index: 200000; 
    top: 0; 
    left: 1.5%; 
    right: 1.5%; 
    margin: 0 auto 0 auto; 
    padding: 20px; 
    list-style: none; 
} 
ul.sub-menu li { 
    width: 24%; 
    display: inline-block; 
    padding: 8px 9px; 
    text-align: center; 
} 

ul.sub-menu .toggled-on { 
    display: block; 
} 
.site-content { 
    display: block; 
    position: relative; 
} 

解決方案：所以這裏的解決方案是不使用appendTo（），我不得不把元素放回原處它來自何時切換。解決的辦法是隻使用切換正確位置菜單項：對（「點擊」切換它的.SUB菜單和$（）絕對CSS

jQuery('#menu-main-menu').on('click', 'button', function(event) { 
     if($(this).closest("li.menu-item").children("ul.sub-menu").length > 0) 
    { 
     $(this).closest("li.menu-item").children("ul.sub-menu").slideToggle('fast'); 
     return false; 
    } 
    }); 

Answer 1

看到它在這裏工作：http://jsfiddle.net/abdqt6d9/

的問題是，你寫你的jQuery選擇不正確。

$('ul.sub-menu') 

這意味着它會搶在頁面內的所有匹配的元素

你什麼需要做的就是搶相應的李。在你的點擊（）中，$（this）變成被點擊的按鈕。使用.parent（）會給你li元素。從那裏，尋找你的相應子菜單中li_element內：

var $li_element = $(this).parent() 
var $sub_menu = $li_element.find(".sub-menu") 
if ($li_element.find(".sub-menu:visible").length > 0) { 
    $sub_menu.hide() 
} else { 
    $sub_menu.show() 
} 

的另一個問題是，也許你的你的子菜單造型上面的按鈕。所以一旦你顯示它，你不能再按下按鈕。所以你需要重新設置你的子菜單。

Answer 2

$("ul.sub-menu")將應用於所有子菜單，因此您需要將其更改爲僅查找父按鈕內的子菜單。您可以使用.closest（或只是.parent()），然後.find

//closest("li") will find the closest parent that is an li 
//find(".sub-menu") will find the sub-menu within 
$(this).closest("li").find(".sub-menu").show(); 

如果您的按鈕總是將成爲子菜單，然後才能苗條下來，只是.next(".sub-menu")

$(this).next(".sub-menu").show();