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

jquery li ul子菜单问题

2 个答案: