Question

我正在使用oscommerce构建一个商店，并使用一个显示类别无序列表的插件的菜单。 UL列表显示如此......

    <ul id='suckertree1'><li><a href='index.php?cPath=21'>Summer</a>
        <ul>
          <li>
            <a href='index.php?cPath=21_23'>Bikes</a>
          <ul>
           <li><a href='index.php?cPath=21_23_28'>E-Bikes</a></li>
           <li><a href='index.php?cPath=21_23_27'>Mountainroad</a></li>
           <li><a href='index.php?cPath=21_23_26'>Road Bikes&nbsp;(1)</a></li>
      </ul>
     </li>
    <li><a href='index.php?cPath=21_24'>Clothing</a>
    <ul>
       <li><a href='index.php?cPath=21_23_28'>Gloves</a></li>
       <li><a href='index.php?cPath=21_23_27'>Shoes</a></li>
       <li><a href='index.php?cPath=21_23_26'>Protection</a></li>
  </ul>

</li>
    </ul>
    </li>
    <li>
    <a href='index.php?cPath=22'>Winter</a>
    </li>
    </ul>

我正在使用jquery隐藏菜单的一部分。当您单击自行车时 - 它会显示该子菜单。我遇到的问题是，子菜单链接没有链接，他们再次关闭菜单..

这是我（可怕的）jQuery代码

$(document).ready(function() {
    $("ul#suckertree1 li ul li ul").hide();
    $("ul#suckertree1 li ul li a").click(function(e) {
        e.preventDefault();
        $("ul#suckertree1 li ul li ul").slideToggle();
    });
});

由于此菜单的限制，我无法将类或ID分配给除已经存在的＃suckertree1之外的菜单。如何防止preventDefault（）影响子菜单点？并且，单击项目以仅切换下面的子菜单？

由于

詹姆斯

Answer 1

而不是：

 $("ul#suckertree1 li ul li ul").slideToggle();

相对地找到<ul>，因为它位于您点击的<a>旁边，使用.siblings()或.next()非常容易，例如：

$(this).siblings('ul').slideToggle();

所以它看起来像这样：

$(function() {
  $("ul#suckertree1 li ul li ul").hide();
  $("ul#suckertree1 li ul li:has(ul) > a").click(function(e) {
    $(this).siblings('ul').slideToggle();
    e.preventDefault();
  });
});

You can give it a try here

这也修复了使用:has()和the child selector (>)工作的子菜单链接。我们正在做的只是将此处理程序绑定到<li>中还包含<ul>元素的链接。如果没有一个（没有子菜单），这个代码甚至不会为该锚点运行，它只会像往常一样继续跟随它href。

Jquery ul Submenu slidetoggle问题

1 个答案: