在 Bootstrap 中向下拉菜单添加开放类的问题

Question

我正在尝试将.open类添加到.btn-group以通过执行以下操作来保持菜单打开

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

但它不起作用！

我不想使用

.preventDefault(); 
.stopPropagation(); 

因为这两个停止一切，包括 chechbox 或选择选项，所以我想为什么不在点击事件时将open类添加到.btn-group ？ 你能告诉我为什么这不起作用吗？

 $('.keep-Open').on('click', 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>

Answer 1

默认点击处理程序删除了open类，因为您不想使用停止传播，一种解决方案是使用 timeout(async) 调用将类添加回来

 $('.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>