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