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

正如杰克指出的那样，您应该能够处理列表项目上的点击，并防止它像event.stopPropagation()那样冒泡：

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

Stack Snippets中的演示：

＆＃13;

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

＆＃13;

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

＆＃13;

进一步阅读：

您还可以查看我对Keep Bootstrap Dropdown Open When Clicked Off

的回答

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

Bootply Link

1 个答案: