Jquery ul子菜单slidetoggle问题

我正在使用oscommerce构建一家商店，并使用一个显示无序列表的插件的菜单。的UL列表显示是这样的...Jquery ul子菜单slidetoggle问题

<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（）影响子菜单点？还可以点击一个项目来切换下面的子菜单？

感谢

詹姆斯

来源

2010-08-04 James Ison

取而代之的是：

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

找到<ul>比较，因为它是你点击这是很容易获得在使用.siblings()或.next()，这样的<a>旁：

$(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。

来源

2010-08-04 09:47:21

Jquery ul子菜单slidetoggle问题

回答

相关问题