0

使用するjQueryナビゲーションがあり、別のnav要素をクリックするslideToggleと。slideUpただし、マウスがクリック機能から表示された子要素を離れたら、ナビゲーション要素を非表示にしたいので、これを希望どおりに機能させることはできません。

私は以下を試しましたが、これが<h5>タグを残したときに<ul>消えたのは、以下のステートメントを考えると理にかなっています:

$('.nav_parent h5').on('click mouseleave', function ()

どうすればいいのかわからないので、タイムアウト機能の設定についてオンラインで読みましたが、試してみて失敗しました。

それで、この機能を有効にするために私のスクリプトを適応させたり、適応させたりできる実用的な例はありますか?

私のスクリプトは以下にあるか、jsFiddleを表示しています

前もって感謝します！

js/js.js

$('.nav_parent h5').click(function () {
  $(this).next('.nav_child').slideToggle();
   $(this).parent().siblings().children().next().slideUp();
    return false;
});

index.html

<div class="container">
    <ul id="header_nav">
        <li class="nav_parent">
            <h5>Reports</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Download CSV</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Build</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Build new site</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Subscriptions</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">E-Briefings</a>
                </li>
            </ul>
        </li>
        <li class="nav_parent">
            <h5>Media Store</h5>

            <ul class="nav_child">
                <li><a href="#" class="mnavlink">Image Store</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

css/style.css

.nav_parent {
    display:inline-block;
    width:24%;
    background:#FCCC5F;
}
.nav_parent h5:hover {
    background:#FCE49D;
}
.nav_child {
    display:none;
}
.nav_child li {
    line-height:30px;
}
.nav_child li:hover {
    background:#FCE49D;
}
4

1 に答える 1

2

試す

$('.nav_parent h5').on('click', function (e) {
    $(this).next('.nav_child').stop(true, true).slideDown();
    $(this).parent().siblings().children('.nav_child').stop(true, true).slideUp();
    return false;
});
$('.nav_parent').on('mouseleave', function () {
    $(this).children('.nav_child').stop(true, true).slideUp();
    return false;
});

デモ:フィドル

于 2013-11-10T16:07:45.963 に答える