Question

我正在尝试将.open类添加到.btn-group以通过执行

来保持菜单打开

$('.keep-Open').on('click', function() {
        $('.btn-group').addClass('open');
 });

但它不起作用！

我不想使用

.preventDefault(); 
.stopPropagation();

因为这两个停靠点包括chechbox或select选项所以我为什么不在点击事件中将open类添加到.btn-group？能不能让我知道为什么这不起作用？

＆＃13;

$('.keep-Open').on('click', function() {
        $('.btn-group').addClass('open');
 });

＆＃13;

body{margin:50px;}
.dropdown-menu{min-width:230px;}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
<div class="list-group">
  <button type="button" class="list-group-item keep-Open">Cras justo odio</button>
  <button type="button" class="list-group-item keep-Open">Dapibus ac facilisis in</button>
  <button type="button" class="list-group-item keep-Open">Morbi leo risus</button>
  <button type="button" class="list-group-item keep-Open">Porta ac consectetur ac</button>
  <button type="button" class="list-group-item keep-Open">Vestibulum at eros</button>
</div>
  </div>
</div>

＆＃13;

Answer 1

默认的单击处理程序删除open类，因为您不想使用停止传播，一种解决方案是使用超时（异步）调用来重新添加类

$('.keep-Open').on('click', function() {
  setTimeout(function() {
    $('.btn-group').addClass('open');
  })
});

body {
  margin: 50px;
}
.dropdown-menu {
  min-width: 230px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <div class="dropdown-menu">
    <div class="list-group">
      <button type="button" class="list-group-item keep-Open">Cras justo odio</button>
      <button type="button" class="list-group-item keep-Open">Dapibus ac facilisis in</button>
      <button type="button" class="list-group-item keep-Open">Morbi leo risus</button>
      <button type="button" class="list-group-item keep-Open">Porta ac consectetur ac</button>
      <button type="button" class="list-group-item keep-Open">Vestibulum at eros</button>
    </div>
  </div>
</div>

在Bootstrap中向Dropdown菜单添加Open类的问题

1 个答案: