为了账号安全,请及时绑定邮箱和手机立即绑定

单击里面,避免关闭下拉菜单

单击里面,避免关闭下拉菜单

慕少森 2019-07-29 16:24:10
单击里面,避免关闭下拉菜单我有一个Twitter Bootstrap下拉菜单。正如所有Twitter 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 / nextcontrols,...)将被“忽略”。$('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无法添加类或属性这个小提琴是正常的行为,这个小提琴是event.stopPropagation()附加的。更新感谢罗曼的回答。我也找到了一个你可以在下面找到的答案。
查看完整描述

3 回答

?
函数式编程

TA贡献1807条经验 获得超9个赞

这也应该有所帮助

$(document).on('click', 'someyourContainer .dropdown-menu', function (e) {
  e.stopPropagation();});


查看完整回答
反对 回复 2019-07-29
  • 3 回答
  • 0 关注
  • 614 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信