javascript - 在按钮外单击时隐藏下拉列表

标签 javascript jquery twitter-bootstrap css

我正在使用 Bootstrap 下拉列表,但我在其中附加了我自己的 jQuery。我的代码在这里

<button class="btn dropdown-toggle" type="button" data-toggle="dropdown">User Name<span class="caret"></span></button>
<ul class="dropdown-menu">
  <li><a href="#">Profile</a></li>
  <li><a href="#">Logout</a></li>
</ul>
$('.dropdown-toggle').click(function () {
  $('.dropdown-menu').slideToggle();
});

当我不使用 jQuery 时,在单击按钮外部(正文中的任何位置)时,下拉菜单被隐藏。但在使用 slideToggle 功能后,它并没有被隐藏。我想要和 slideToggle() 函数一样的效果来隐藏下拉菜单!

最佳答案

尝试

...click(function(e){
 e.stopPropagation();
 ...
});

这将减少通过分层 HTML 元素观察到点击传播的可能性

关于javascript - 在按钮外单击时隐藏下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43316660/

相关文章:

javascript - 打字时向数字添加逗号

html - css 和 bootstrap 网格问题

javascript - 在底部对齐一个div

javascript - 检查开放街道 map 中的对象是否是建筑物

javascript - 了解 backbone.js 属性和 toJSON()

javascript - 如何使用 JQuery 切换和 AJAX 调用 PHP 脚本?

jquery - AJAX 成功 html 对话框,不会在按钮单击时关闭

javascript - 即使服务器将 Access-Control-Allow-Origin 设置为 '*' 后也会出现 javascript 错误

javascript - 一个 "fixed"<div>-Tag (Footer) resize height of another

html - 垂直居中 modal-lg Bootstrap Modal 使其变小