0

私の順不同リストはデフォルトでは非表示になっていますが、ユーザーがボタンをクリックすると表示されます。問題は、順序付けられていないリストから移動するときに、すべてを非表示/非表示にしたいことです。何か案は？

<script type="text/javascript">

    $(document).ready(function () {
        $('#aboutUsFlyOut').click(function () {
            $('.flyOutMenu').slideToggle('medium');
        });
    });

</script>

<a href="#" style="cursor: pointer;"><img id="aboutUsFlyOut" src="../../button.png" alt="About Us" /></a>        
<ul class="flyOutMenu">
    <li><a href="">menu item 1<a></li>
    <li><a href="">menu item 2</a></li> 
    <li><a href="">menu item 3</a></li> 
    <li><a href="">menu item 4</a></li> 
</ul>
4

2 に答える 2

1

問題は、順序付けられていないリストから移動するときに、すべてを非表示/非表示にしたいことです。

mouseleaveイベントを にアタッチして、ul再び元に戻すことができます。

$(document).ready(function() {
    $('#aboutUsFlyOut').click(function() {
        $('.flyOutMenu').slideToggle('medium');
    });

    $('ul.flyOutMenu').on('mouseleave', function(){
        $(this).slideToggle('medium');
    });
});​

デモ- mouseleave でリストを非表示

のコメントに応えてJuan Mendes、ユーザーがマウスでホバーした場合に備えて、2 秒待ってから再び非表示にするバリエーションを追加しました。

$(document).ready(function() {
    var mouseHasEntered = false;

    $('#aboutUsFlyOut').click(function() {
        $('.flyOutMenu').slideToggle('medium');
    });

    $('ul.flyOutMenu').on('mouseenter', function() {
        mouseHasEntered = true;
    });

    $('ul.flyOutMenu').on('mouseleave', function() {
        var $list = $(this);

        mouseHasEntered = false;

        setTimeout(function() {
            if (!mouseHasEntered) {
                $list.slideToggle('medium');

                // or use $list.hide() if you don't want it to animate.
            }
        }, 2000);
    });
});​

デモ- マウスが再入力された場合に備えて、マウスを離すと遅延してリストを非表示にします

于 2012-09-05T20:59:12.497 に答える
0

mouseoutメニューが表示されている場合は、をバインドして非表示にすることができます。

var menu = $('.flyOutMenu');
$('#aboutUsFlyOut').on('click', function () {
    menu.slideToggle('medium');
}).on('mouseout', function(){
    if(menu.is(':visible')
        menu.slideToggle('medium');
});

メニューが現在アニメーション化されていないことを確認するために、さらにいくつかのチェックを追加する必要がある場合があります。

于 2012-09-05T20:52:40.697 に答える