jQuery：只選擇ul，不選擇ul ul

Question

我正在嘗試使用 jQuery 擊敗基本的手風琴風格菜單。

這是菜單：

http://www.cybart.com/bscg/

這是一個為其提供手風琴功能的代碼片段：

$('#access ul li').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).children('ul:hidden').slideDown();

    });

問題：單擊子菜單鏈接會使子菜單向上滑動（並關閉）。

我想在單擊子菜單鏈接時保持子菜單打開，並且僅在單擊頂級鏈接時向上滑動。

我怎樣才能 select 只有頂級 ul 與 jQuery 動畫子菜單？ 或者有沒有辦法 select 子菜單鏈接和“告訴它”以保持子菜單在點擊時打開？

我會很感激你的智慧！

Answer 1

看來您需要在 CSS 中使用>運算符。

.foo >.bar選擇所有帶有 class bar的元素，它是帶有 class foo的元素的直接子元素

明白了，工作代碼：

$('#access ul.menu > li > a').click(function(){
        $('#access ul ul:visible').slideUp();
        $(this).siblings('ul').slideDown();
    });
}); 

---

為了防止菜單再次向上滑動，這可行：

$('#access ul.menu > li > a').click(function(){
        var siblingUl = $(this).siblings('ul');
        if(siblingUl.is(':visible')) { // The currently open menu was clicked
            // Remove this if you want nothing to happen
            siblingUl.slideUp();
            return;
        }

        $('#access ul ul:visible').slideUp();
        siblingUl.slideDown();
    });
}); 

Answer 2

這更簡單，對我有用。

$(".parent").click(function() {
   $(this).children('ul').slideToggle();
});

Answer 3

您無法阻止菜單關閉，因為當您單擊鏈接時，瀏覽器正在發出新請求並重新加載菜單。 只需觀看 URL 吧。 單擊子菜單鏈接時，URL 會發生變化。

您需要在 URL 中添加一些內容以阻止子菜單折疊，或者測試 URL 以查看它是否應該在頁面加載后重新打開手風琴。

Answer 4

我花了 10 分鍾來閱讀和理解你的代碼，因為你有很多 styles 和 id 的，這很復雜，注意最佳實踐

您所需要的只是類似

<ul>
  <li>
   <a class="menu">Menu</a>
    <ul>
       <li><a>Submenu</a></li>
    </ul>
  </li>
  <li>Other menu</li>
</ul>

...

$(document).ready(function(){

  $(".menu").click(function(){
      $(this).next().toggle()
  })

})