[英]Issue on Adding a Open Class to Dropdown Menu In Bootstrap
我正在嘗試將.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>
默認點擊處理程序刪除了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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.