创建侧边栏切换下拉菜单时出现问题

Question

我正在处理http://www.variied.com/market/men/。我正在尝试在侧边栏上创建一个切换下拉菜单，当有人点击侧边栏上的“顶部”链接时触发该菜单，然后将切换子菜单中的内容以显示。这是我当前的代码

<style>
ul.category ul.sub-menu ul.sub-menu li a{
display:none
}
</style>
<script>
jQuery(document).ready(function() { 
    jQuery("#menu-item-746").click(function() {
        jQuery(this).next("ul.category ul.sub-menu ul.sub-menu li a").toggle();
        return false;   
    });
});
</script>

Answer 1

这个小提琴有几个问题：

1. 您有一个名为#submenu 的类，它应该只是submenu
2. 您传递了event，因此您可以使用e.preventDefault()（除非您更喜欢return false）
3. 我建议将子导航 ul 设置为 display: none 并切换它，我会使用 slideToggle 以获得更好的效果。

JS

$("#menu-item-746").click(function(e) {
  e.preventDefault();
  $(this).next("ul").slideToggle();
});

HTML

<ul class="submenu">
   <li  id="menu-item-746"><a href="#">Test Item</a></li>
   <ul>
      <li><a href="#">Test1</a></li>
      <li><a href="#">Test2</a></li>
   </ul>
</ul>

CSS

.submenu ul{
  display: none;
}

FIDDLE

更新

我查看了您网站上的 HTML，您的 ul 子导航似乎是您的 li 的子导航，而不是兄弟姐妹（它是您小提琴中的兄弟姐妹）。试试这个：

$(this).find("ul").slideToggle();

此外，从您提供的代码来看，您的目标是id，这意味着这仅适用于该 1 元素。似乎带有子导航的那些有一个名为 .menu-item-has-children 的类，所以我会针对它，如下所示：

$(".sub-menu .menu-item-has-children").click(function(e) {
   e.preventDefault();
   $(this).find("ul.sub-menu").slideToggle();
});

新更新

然后定位a：

$(".sub-menu .menu-item-has-children").on("click", " a:first", function(e) {
  e.preventDefault();
  $(this).siblings("ul.sub-menu").slideToggle();
});