赵健的个人博客

Menu

Bootstrap 下拉菜单(Dropdown)插件取消下拉框默认点击隐藏

Bootstrap 下拉菜单(Dropdown)插件,下拉框取消默认点击下拉框内区块隐藏。有的时候我们不希望点击下拉框的内容后,下拉框就隐藏。比如,如果下拉框内容是一个列表之类的话,当我们点开列表后下拉框就隐藏了,而此时我们还没有选择我们要选择的元素。

 

基于这种情况,我们需要对下拉框进行更多的控制。

我们整体的结构可能是这样的:

<div>
<div><div class="dropdown-menu w-xl animated fadeInUp"></div>
<div><div class="panel bg-white"></div>
<div></div>
<div><div class="list-group"style="max-height: 400px; overflow-y: scroll; overflow-x: hidden;"></div>
<div><div class="list-group-item"></div>
<div>......</div>
</div>

 

取消下拉框默认点击隐藏的方法:

/**dropdown取消默认点击隐藏 */
    $(".dropdown-menu").click(function (e) {
      e.preventDefault();
      e.stopPropagation();
      return false;
  });

 

取消了所有的元素点击事件,如此一来当我们点击下拉框列表中的任何内容下拉框都不会隐藏了,除非我们点击外部元素或者点击button。

打赏作者↓↓↓
— 编辑于 共写了624个字
— 文内使用到的标签:
— 阅读数:1,025
— 暂无评论

Leave a Reply

Your email address will not be published. Required fields are marked *