jQuery的李UL子問題

Question

我有一個問題，我想打一個jQuery的子菜單是這樣的：

<ul id="submenu" class="menu"> 
    <li class="item-1"><a href="test.html">Test 1</a></li> 
    <li class="item-2 deeper parent"> 
     <a href="test.html">Test 2</a> 
     <ul> 
      <li class="item-xy"><a href="#">Test 1</a></li> 
      <li class="item-xy"><a href="#">Test 1</a></li> 
      <li class="item-xy"><a href="#">Test 1</a></li> 
     </ul> 
    </li> 
    <li class="item-3 deeper parent"> 
     <a href="test.html">Test 3</a> 
     <ul> 
      <li class="item-xy"><a href="#">Test 1</a></li> 
      <li class="item-xy"><a href="#">Test 1</a></li> 
      <li class="item-xy"><a href="#">Test 1</a></li> 
     </ul> 
    </li> 
    <li class="item-4"><a href="test.html">Test 4</a></li> 
    <li class="item-5"><a href="test.html">Test 5</a></li> 
</ul> 

$("li.deeper ul").hide(); 
$("ul#submenu li.deeper").hover(function(event){ 
    var myClass = $(this).attr("class"); 
    var ulcl = myClass.replace("deeper parent",""); 
    event.stopPropagation(); 
    $("."+ulcl+" ul").slideToggle(); 
}); 

它的工作原理，但有時如果你是附近用鼠標裏的物品， 子項目開始冒泡。 你可以在這裏看到： http://jsfiddle.net/andrewwhitaker/ybVFj/

有人能幫助我嗎？

感謝

Answer 1

它氣泡，因爲當它開始滑動你再弄mouseout事件，這再次觸發切換。因此，添加一些標誌

您的結構是有點奇怪，爲什麼，而不是

var myClass = $(this).attr("class"); 
var ulcl = myClass.replace("deeper parent",""); 
$("."+ulcl+" ul").slideToggle(); 

不使用

if(!isSliding) { 
    isSliding = true; 
    $(this).find("ul").slideToggle(function(){isSliding = false;}); 
} 

？

您引用的代碼與您在此處發佈的代碼不同。

Answer 2

您li元素顯示爲塊，讓他們把你的屏幕的整個寬度。 通過CSS減少它們的寬度，或使用此變種：

$("li.deeper ul").hide(); 
$("ul#submenu li.deeper > a").hover(function(event){ 
    var myClass = $(this).parent().attr("class"); 
    var ulcl = myClass.replace("deeper parent",""); 
    event.stopPropagation(); 
    $("."+ulcl+" ul").slideToggle(); 
}); 

我加> a到選擇和改變$(this).attr("class")到$(this).parent().attr("class")