使用jquery隐藏失去焦点的无序列表

Question

我的无序列表默认隐藏，但在用户点击按钮时显示。问题是当我离开无序列表时，我希望整个事物隐藏/消失。有什么想法吗？

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

Answer 1

  

问题是，当我离开无序列表时，我想要整个   隐藏/消失的东西。

您可以将mouseleave事件附加到ul并再次将其重新启用：

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

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

DEMO - 在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);
    });
});​

DEMO - 在鼠标重新输入时延迟鼠标左键列表

Answer 2

您可以绑定mouseout并隐藏菜单（如果可见）：

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

您可能需要添加一些检查以确保菜单当前没有动画。