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問題

回答

相關問題