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

スライドを開始すると、別のマウスアウトイベントが発生するため、バブルが発生します。これにより、トグルが再び起動されます。だから、いくつかのフラグを追加します

あなたの構成は少し奇妙です、なぜ代わりに

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 に答える