我有一个推特 bootstrap 下拉菜单.正如所有推特 bootstrap 用户所知,点击后下拉菜单关闭(甚至在其内部点击).

为了避免这种情况,我可以轻松地在下拉菜单上附加一个click事件处理程序,只需添加著名的event.stopPropagation().

<ul class="nav navbar-nav">
  <li class="dropdown mega-dropdown">
    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
      <i class="fa fa-list-alt"></i> Menu item 1
      <span class="fa fa-chevron-down pull-right"></span>
    </a>
    <ul class="dropdown-menu mega-dropdown-menu">
      <li>
        <div id="carousel" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-slide-to="0" data-target="#carousel"></li>
            <li class="active" data-slide-to="1" data-target="#carousel"></li>
          </ol>
          <div class="carousel-inner">
            <div class="item">
              <img alt="" class="img-rounded" src="img1.jpg">
            </div>
            <div class="item active">
              <img alt="" class="img-rounded" src="img2.jpg">
            </div>
          </div>
          <a data-slide="prev" role="button" href="#carousel" 
             class="left carousel-control">
            <span class="glyphicon glyphicon-chevron-left"></span>
          </a>
          <a data-slide="next" role="button" href="#carousel" 
             class="right carousel-control">
            <span class="glyphicon glyphicon-chevron-right"></span>
          </a>
        </div>
      </li>
    </ul>
  </li>
</ul>

然而,这看起来很简单,而且是非常常见的行为,而且由于carousel-controls个(以及carousel indicators个)事件处理程序被委托给document对象,因此这些元素上的click事件(prev/next个控件,.)将被"忽略".

$('ul.dropdown-menu.mega-dropdown-menu').on('click', function(event){
    // The event won't be propagated up to the document NODE and 
    // therefore delegated events won't be fired
    event.stopPropagation();
});

基于以下原因,依赖Twitter bootstrap 下拉hide/hidden事件不是解决方案:

  • 为这两个事件处理程序提供的事件对象不引用已单击的元素
  • 我无法控制下拉菜单内容,因此无法添加flag类或属性

This fiddle为正常行为,this fiddle为添加event.stopPropagation().

使现代化

感谢罗曼的answer that you can find below/3165879">his answer美元.我还找到了answer that you can find below.

推荐答案

移除数据属性data-toggle="dropdown"并实现下拉列表的打开/关闭可以是一个解决方案.

首先,通过处理单击链接来打开/关闭下拉菜单,如下所示:

$('li.dropdown.mega-dropdown a').on('click', function (event) {
    $(this).parent().toggleClass('open');
});

然后聆听下拉列表外的点击,将其关闭,如下所示:

$('body').on('click', function (e) {
    if (!$('li.dropdown.mega-dropdown').is(e.target) 
        && $('li.dropdown.mega-dropdown').has(e.target).length === 0 
        && $('.open').has(e.target).length === 0
    ) {
        $('li.dropdown.mega-dropdown').removeClass('open');
    }
});

以下是演示:

Javascript相关问答推荐

为什么(1 + Number.Min_UTE)等于1?

单击按钮后未清除 Select

在卡信息之间切换

提交表格后保留Web表格中的收件箱值?

我可以使用CSS有效地实现最大宽度=100%和最大高度=100%,而无需父母有明确的/固定的宽度和高度,替代方法吗?

useNavigation更改URL,但不呈现或显示组件

浮动Div的淡出模糊效果

当试图显示小部件时,使用者会出现JavaScript错误.

如何将Openjphjs与next.js一起使用?

Regex结果包含额外的match/group,只带一个返回

如何在Vue 3中创建自定义 Select 组件,并将选项作为HTML而不是props 传递?

我的角模板订阅后不刷新'

可更改语言的搜索栏

Vaadin定制组件-保持对javascrip变量的访问

AJAX POST在控制器中返回空(ASP.NET MVC)

处理app.param()中的多个参数

如何组合Multer上传?

在GraphQL解析器中修改上下文值

如何在独立的Angular 应用程序中添加Lucide-Angel?

谷歌饼图3D切片