为什么我的下拉菜单第一次点击后突然消失？

您可以看到我的现场演示here.我希望下拉菜单正确显示。现在它第一次点击时突然隐藏。我想让下拉菜单在当前显示的下拉菜单之外的任何地方点击时消失。我该怎么做？为什么我的下拉菜单第一次点击后突然消失？

这是我的jQuery代码

$(document).ready(function() { 
    $('#jsddm > li').click(function(e){ 
     e.preventDefault(); 
     $(this).find('ul').eq(0).css('visibility', 'visible').slideToggle(); 
    }); 
});

我注意到，如果.css('visibility', 'visible')被删除，下拉菜单将不再工作。

来源

2012-12-19 Pakinai Kamolpus

因为当你点击“礼”元素上，点击其他地方的文件中不会有任何影响你的函数只调用。您可以向隐藏菜单的整个主体添加点击事件。要做到这一点，您还需要停止菜单中的点击事件以冒泡到文档，否则它会立即显示然后隐藏。

尝试这样：

$(document).ready(function() { 

$('#jsddm > li').click(function(e){ 
     e.stopPropagation(); 
     e.preventDefault(); 
     $(this).find('ul').eq(0).slideToggle(); 
}); 

$(document).click(function (e) { 
    $('#jsddm > li').find('ul').eq(0).slideUp(); 
});

}）;

你也不需要使用可见性：隐藏，它只是让你做更多的工作。这是我的CSS与上面的编辑代码一起做编辑，似乎在一个本地副本我做奏效：

更换

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; visibility: hidden; width:220px; z-index:9999;}

随着

#menu #jsddm li ul{margin: 0; padding: 0; position: absolute; display:none; width:220px; z-index:9999;}

来源

2012-12-19 03:09:21 lamflam

它不工作。你可以看看演示。 –

我刚才意识到我删除了e.preventDefault（），但是应该加回去。这可以防止标记实际上像链接一样运行并重新加载页面。我编辑了代码，这是否有诀窍？ – lamflam

不，它还没有工作。请帮忙。 –

也许你应该检查它是否已经显示或不先显示，然后执行你的代码。喜欢的东西：

$(document).ready(function() { 
    $('#jsddm > li').click(function (e) { 
     e.preventDefault(); 
     if ($(this).find('ul').eq(0).is(':visible')) { 
      $(this).find('ul').eq(0).slideUp(); 
     } else { 
      $(this).find('ul').eq(0).slideDown(); 
     } 
    }); 
});

来源

2012-12-19 02:49:26 PhearOfRayne

我已经改变了代码，它不起作用。 –

尝试设置“显示”为“无”的所有标签在开始的时候。

$(document).ready(function() { 
    $('#jsddm > li > ul').css("display", "none"); 
    // ur code 
}

来源

2012-12-19 02:59:39 tom

它的作品！以及当我点击页面的任何区域时如何隐藏它？ –

@lamflam有最终的解决方案:) – tom

为什么我的下拉菜单第一次点击后突然消失？

回答

相关问题