1

我正在尝试制作一个与保管箱仪表板非常相似的下拉菜单，如果您单击用户名，则会出现一个弹出菜单。再次单击用户名将关闭弹出窗口（每次单击时都会切换它）。

需要注意的是，单击弹出按钮本身以外的任何位置也会将其关闭。

到目前为止，我几乎可以正常工作，但不是 100%。如果您直接单击实际的“body”元素，它将按原样关闭弹出窗口。我的意思是我的网站有一个 .wrapper 元素，它不会占据页面的整个高度。底部有一条细条，没有实际的元素覆盖它，只有<body>标签。任何地方.wrapper或其他元素占用空间（即使是 100% 宽度的不可见包装），如果您单击任何有元素的地方（除了主体），它都不会关闭窗口。

javascript:

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$(document).on('click',function(e) { 
    if ( $(e.target).parents($flyout).length === 0 ) { 
        $flyout.fadeOut(flyoutDuration); 
    }
});

HTML

<body>
    <div class="blackbar">
        <div class="container clearfix">
            <a href="/"><div class="icon logo"></div></a>
            <div class="flyout">
                <h3>
                    Welcome back, <a href="#">username</a>
                </h3>
                <div class="menu">
                    <ul>
                        <li><a href="#"><div class="users"></div>Users</a></li>
                        <li><a href="#"><div class="groups"></div>Groups</a></li>
                        <li><a href="#"><div class="configuration"></div>Configuration</a></li>
                        <li><a href="#"><div class="logout"></div>Logout</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="wrapper">
        <! -- content here -->
    </div>
</body>

预期的行为应该是您单击的任何不是 .flyout 后代的元素都应该关闭窗口（包括.blackbar徽标等）

4

2 回答 2

2

老实说 - 当我做这样的事情并且我不希望在“框”内点击来关闭元素时 - 我会阻止点击冒泡。

// FLYOUT menu 
$flyout = $('.flyout ul'),
 flyoutDuration = 120;

$('.flyout h3 a').click(function(e) {
    e.preventDefault();
    $flyout.fadeToggle(flyoutDuration);
});

$('.flyout').click(function(e) {
  e.stopPropagation();
  e.preventDefault();
});

$(document).on('click',function(e) { 
  if(flyout-open) {
        $flyout.fadeOut(flyoutDuration); 
    }
});
于 2012-11-05T19:56:40.510 回答
0

Jquery Menu Click -单击主体上的任意位置将关闭菜单

在我的情况下，如果单击主链接或链接外部（即 html/body 上的任何位置），我想关闭下拉菜单

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){

    var divObj = $(this).next();
    var nstyle = divObj.css("display");

    if(nstyle == "none"){
        divObj.slideDown(false,function(){
            $("html").bind("click",function(){
                divObj.slideUp();
                $("html").unbind("click");
            });
        });
    }
};

$(".clickme").click(toggleClick);
于 2014-03-03T09:00:20.867 回答