Question

我正在http://www.variied.com/market/men/工作。我尝试在侧边栏上创建一个切换下拉菜单，当有人点击＆＃34; Tops＆＃34;边栏上的链接，然后切换要显示的子菜单中的内容。这是我当前的代码

<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

这个小提琴有几个问题：

您有一个名为#submenu的课程，它应该只是submenu
您正在传递event，因此您可以使用e.preventDefault()（除非您更喜欢return false）
我建议将subnav 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 subnav是您li的孩子而不是兄弟姐妹（这是您小提琴中的兄弟姐妹）。试试这个：

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

同样，根据您提供的代码，您定位的是id，这意味着这只适用于该1个元素。似乎带有subnav的那个有一个名为.menu-item-has-children的类，所以我会将其作为目标，如下所示：

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

NEW UPDATE

然后定位a，然后：

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

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

1 个答案: