0

我有一个问题，我想制作一个这样的 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();
});

它可以工作，但有时如果您使用鼠标靠近 li 项目，则子项目开始冒泡。你可以在这里看到它：http: //jsfiddle.net/andrewwhitaker/ybVFj/

有人可以帮助我吗？

谢谢

4

2 回答 2

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;});
}

?

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

于 2012-10-28T11:54:18.970 回答
0

您的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-28T11:51:49.687 回答