Question

在以下代码中，用户可以将鼠标悬停在该区域上，并出现一个下拉框。如果用户点击屏幕上的某个位置，用户希望该框消失。有没有办法使用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");
        });

Answer 1

尝试添加此内容：

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

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

如果用户点击.signin_menu之外的元素，则会隐藏.signin_menu。

Answer 2

函数.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。这样，将鼠标从盒子中取出后，下拉列表就会消失。

JQuery下拉框行为

2 个答案: