选择下拉元素后保持下拉菜单打开

Keeping the dropdown open after selecting dropdown element

本文关键字：下拉菜单 元素 选择      更新时间：2023-09-26

正在使用的下拉菜单是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类更改为下拉打开。我没有得到任何错误在我的控制台，但下拉类没有改变。

bootp链接

正如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>

进一步阅读:

你也可以看看我的答案保持引导下拉菜单打开当点击关闭

相关文章：