jQuery下拉菜单-如何在单击主体时隐藏菜单

用户名

我一直在努力做到这一点,以便用户单击时隐藏我的导航。我只是设法做到了这一点,显然我做错了什么。

这是我到目前为止的内容:

如果没有正文,请点击http://jsfiddle.net/yL45ds8j/

尝试单击身体(它会立即将其隐藏)http://jsfiddle.net/yL45ds8j/1/

代码:

function handler1() {
    $('.headnav').addClass('open').animate({
        top: "0"
    },400);            
    $(this).addClass('open');
    $(this).one("click", handler2);
}
function handler2() {
    $('.headnav').removeClass('open').animate({
        top: "-100%"
    },400);
    $('.menuBtn').removeClass('open');
    $('.menuBtn').one("click", handler1);
}             

$(".menuBtn").one("click", handler1);

$('body').click(function(event) { 
    if(!$(event.target).closest('.headnav.open').length) {
        if($('.headnav').hasClass("open")) {
            $('.headnav').removeClass('open').animate({
                top: "-100%"
            },400);
        }
    }             
});

有人对我如何解决这个问题有任何建议吗?非常感谢

斯内哈图尔西

menuBtn的click事件冒泡到主体,并且body click事件的处理程序将其关闭。请在menuBtn处理程序中停止事件的传播。

e.stopPropagation();

小提琴:http : //jsfiddle.net/yL45ds8j/8/

这是更清洁的解决方案:jsfiddle.net/yL45ds8j/6

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery - 下拉菜单

来自分类Dev

如果单击主体任何元素,如何隐藏下拉菜单?

来自分类Dev

如果单击主体任何元素,如何隐藏下拉菜单?

来自分类Dev

单击jQuery或JavaScript菜单下拉菜单

来自分类Dev

jQuery,单击其他位置时隐藏下拉菜单

来自分类Dev

jQuery下拉菜单的错误

来自分类Dev

jQuery下拉菜单的麻烦

来自分类Dev

jQuery简单下拉菜单

来自分类Dev

jQuery的。硬下拉菜单

来自分类Dev

jQuery CSS下拉菜单

来自分类Dev

使用jQuery $ this下拉菜单

来自分类Dev

jQuery下拉菜单的错误

来自分类Dev

jQuery下拉菜单不显示菜单

来自分类Dev

jQuery-单击下拉菜单

来自分类Dev

当用户单击下拉菜单的一侧时,如何隐藏下拉菜单?

来自分类Dev

在下拉菜单外的任何地方单击时如何隐藏下拉菜单?

来自分类Dev

单击下拉菜单时如何隐藏默认的<select> <option>?

来自分类Dev

单击内部按钮时如何隐藏下拉菜单

来自分类Dev

滚动时的jQuery下拉菜单

来自分类Dev

如何使用JQuery创建下拉菜单

来自分类Dev

隐藏下拉菜单

来自分类Dev

单击下拉菜单

来自分类Dev

悬停时,jQuery下拉菜单不会隐藏

来自分类Dev

jQuery下拉菜单允许下拉多个菜单

来自分类Dev

单击按钮时如何在javascript中隐藏/显示下拉菜单

来自分类Dev

如何在使用 Tableau Reader 单击 Tableau 按钮时隐藏下拉菜单

来自分类Dev

jQuery下拉菜单无法正常工作

来自分类常见问题

禁用jquery选择下拉菜单

来自分类Dev

下拉菜单中的jQuery change事件