javascript - 选择下拉元素后保持下拉列表打开

Question

正在使用的下拉菜单是 Bootstrap 。代码如下

<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

Answer 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 的回答