【问题标题】:Keeping the dropdown open after selecting dropdown element选择下拉元素后保持下拉菜单打开
【发布时间】:2015-05-14 12:16:32
【问题描述】:

正在使用的下拉菜单是引导程序。代码如下

<li id="changethis" class="dropdown">
 <a  href="#" class="dropdown-toggle" data-toggle="dropdown">LINK</a>
  <ul class="dropdown-menu">
   <li id="clickme"><a href="#">Link1</a></li>
   <li><a href="#">Link 2</a></li>
   <li><a href="#">Link 3</a></li>
  </ul>
 </a>
<li>

Jquery 代码如下所示

$(document).ready(function () {
 $('#clickme').on('click', function () {
    $('#changethis').removeClass('dropdown');
    $(this).addClass('dropdown open');
 });
});

点击 Link1 时,我希望将 li 类更改为下拉打开。我的控制台没有收到任何错误,但下拉类没有更改。


Bootply Link

【问题讨论】:

  • 查看event.stopPropagation()。这应该就是你所需要的。这将阻止链接的父母收到事件通知,从而保持下拉菜单打开。您无需删除或添加类。请记住将event 传递到您的函数中(您可以随意命名)。
  • 标签: javascript jquery html twitter-bootstrap


    【解决方案1】:

    正如 Jack 指出的那样,您应该能够处理对列表项的点击,并防止它像这样使用event.stopPropagation() 冒泡:

    $('#clickme').click(function (e) {
      e.stopPropagation()
    });
    

    堆栈片段中的演示

    $('#clickme').click(function (e) {
      e.stopPropagation()
    });
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
    
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
    
    <div id="changethis" class="dropdown">
      
      <a  href="#" class="dropdown-toggle" data-toggle="dropdown">
        Dropdown <span class="caret"></span>
      </a> 
    
      <ul class="dropdown-menu">
        <li id="clickme"><a href="#">Link1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    
    </div>

    进一步阅读

    您也可以查看我对Keep Bootstrap Dropdown Open When Clicked Off的回复

    【讨论】:

      猜你喜欢
      相关资源
      最近更新 更多
      热门标签