单选按钮组和下拉按钮

嗨我想创建一组单选按钮和引导程序，最后一个按钮是一个下拉按钮，这里是我到目前为止的代码，基本上我想最后一个按钮是一个下拉菜单单选按钮组和下拉按钮

<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

非常感谢，解决了我的问题的其余部分 –

单选按钮组和下拉按钮

回答

相关问题