jQuery的李UL子问题

我有一个问题，我想打一个jQuery的子菜单是这样的：jQuery的李UL子问题

<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/

有人能帮助我吗？

感谢

来源

2012-10-28 user1686123

你确定小提琴属于你的问题吗？ – undefined

它气泡，因为当它开始滑动你再弄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;}); 
}

？

您引用的代码与您在此处发布的代码不同。

来源

2012-10-28 11:54:18 whiteagle

谢谢，我认为这是它。现在它工作了！ – user1686123

您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")

来源

2012-10-28 11:51:49 bukart

jQuery的李UL子问题

回答

相关问题