1

在下面的代码中，用户可以将鼠标悬停在该区域上，然后会出现一个下拉框。如果用户单击屏幕上的某处，用户希望该框消失。有没有办法使用 JavaScript 和 jQuery 来实现这一点？

下面的代码......提前感谢您的回复。

<script type="text/javascript">

    $(document).ready(function () {
        $(".password").fancybox({
            'width': 500,
            'height': 260,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'type': 'iframe'
        });



        // Login drop down
        $(".signin").hover(function (e) {
            e.preventDefault();
            $(".signin_menu").show();
            $(".signin").addClass("menu-open");
        });
        $(".signin_menu").hover(function (e) {
            e.preventDefault();
            $(".signin_menu").show();
            $(".signin").addClass("menu-open");
        });
4

2 回答 2

1

尝试添加这个：

$('html').on('click', function() {
    $('.signin_menu:visible').hide();
});

$('.signin_menu > *').on('click', function(event) {
    event.stopPropagation();
});

如果用户单击 .signin_menu 之外的元素，则 .signin_menu 将被隐藏。

于 2013-07-18T15:39:06.533 回答
0

函数 .hover() 可以有多个参数（http://api.jquery.com/hover/）

如果您放置第二个参数，它将添加一个“hoverOut”处理程序。

试试这个：

$(".signin").hover(function (e) {
        e.preventDefault();
        $(".signin_menu").show();
        $(".signin").addClass("menu-open");
    },function(e){
        e.preventDefault();
        $(".signin_menu").hide();
        $(".signin").removeClass("menu-open");
    });
    $(".signin_menu").hover(function (e) {
        e.preventDefault();
        $(".signin_menu").show();
        $(".signin").addClass("menu-open");
    },function(e){
        e.preventDefault();
        $(".signin_menu").hide();
        $(".signin").removeClass("menu-open");
    });

第一个函数是 HoverIn，第二个是 HoverOut。这样，当您将鼠标从盒子中取出后，下拉菜单就会消失。

于 2013-07-18T15:32:52.460 回答