單選按鈕組和下拉按鈕

嗨我想創建一組單選按鈕和引導程序，最後一個按鈕是一個下拉按鈕，這裏是我到目前爲止的代碼，基本上我想最後一個按鈕是一個下拉菜單單選按鈕組和下拉按鈕

<div class="btn-group" data-toggle="buttons"> 
     <label id='Radio 1' class="btn btn-primary"> 
      <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 
     </label> 
     <label class="btn btn-primary"> 
      <input type="radio" name="options" id="option4" autocomplete="off"> Radio 4 
     </label> 
    </div>

來源

2017-05-11 Ahmed Elgabaly

這是你想要嘗試和做什麼？你可以把使用引導單個按鈕下拉建立自己的下拉菜單，見下圖：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="btn-group" data-toggle="buttons"> 
 
    <label id='Radio 1' class="btn btn-primary"> 
 
    <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 
 
    </label> 
 
    <label class="btn btn-primary"> 
 
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 
 
    </label> 
 
    <div class="btn-group"> 
 
    <label class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
 
     <input type="radio" class="" name="options" id="option4" autocomplete="off"> Radio 4 <span class="caret"></span> 
 
    </label> 
 
    <ul class="dropdown-menu"> 
 
     <li><a href="#">Action</a></li> 
 
     <li><a href="#">Another action</a></li> 
 
     <li><a href="#">Something else here</a></li> 
 
     <li role="separator" class="divider"></li> 
 
     <li><a href="#">Separated link</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

見Bootstrap Single button dropdowns

來源

2017-05-11 21:11:51 detache

Yess，這正是我想要做的，除此之外，還有一件事情，你現在的方式是當點擊前3個按鈕中的任何一個，然後點擊收音機4時，按鈕點擊之前，然後仍然點擊，我想要的是，當點擊4，按鈕之前點擊，然後應該變成不點擊 –

一個一個解決辦法是清除活性類時的下拉是切換：

$('.dropdown-toggle').click(function(){ 
    $('.btn').removeClass('active'); 
});

示例：https://jsfiddle.net/uLa818o3/

來源

2017-05-12 14:28:51 detache

非常感謝，解決了我的問題的其餘部分 –

單選按鈕組和下拉按鈕

回答

相關問題