具有单选按钮行为的引导嵌套按钮组答案

【问题标题】：Bootstrap nested button groups with radiobutton behavior具有单选按钮行为的引导嵌套按钮组
【发布时间】：2014-01-21 22:09:59
【问题描述】：

使用 Twitter Bootstrap，我有一个包含多组按钮的按钮组。其中一些按钮有下拉菜单。根据radio in bootstrap's JavaScript button section，我希望此按钮组具有单选按钮样式的行为。 Here's my JS Fiddle及对应代码：

<div data-toggle="buttons" class="btn-group">
    <label class="btn btn-default active">
        <input type="radio" name="options">General</label>
    <div class="btn-group">
        <label data-toggle="dropdown" class="btn btn-default dropdown-toggle">
            <input type="radio" name="options">Users <span class="caret"></span>
        </label>
        <ul class="dropdown-menu">
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
        </ul>
    </div>
    <div class="btn-group">
        <label data-toggle="dropdown" class="btn btn-default dropdown-toggle">
            <input type="radio" name="options">Assignments <span class="caret"></span>
        </label>
        <ul class="dropdown-menu">
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
        </ul>
    </div>
    <div class="btn-group">
        <label data-toggle="dropdown" class="btn btn-default dropdown-toggle">
            <input type="radio" name="options">Other <span class="caret"></span>
        </label>
        <ul class="dropdown-menu">
            <li><a href="#">1</a>
            </li>
            <li><a href="#">2</a>
            </li>
        </ul>
    </div>
</div>

Bootstrap 有这个功能吗？

【问题讨论】：

标签： javascript twitter-bootstrap radio-button buttongroup

【解决方案1】：

这是你要找的吗？

http://jsfiddle.net/6m5Bp/1/

我在下拉菜单中嵌入了选项按钮 ul ......

<div class="btn-group" data-toggle="buttons">
 <label class="btn btn-primary">
  <input type="radio" name="options" id="option1"> Option 1
 </label>
 <label class="btn btn-primary">
  <input type="radio" name="options" id="option2"> Option 2
 </label>
 <label class="btn btn-primary">
   <a data-toggle="dropdown" href="#" style="color:#fff;">More Options</a>
     <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      <li><label class="btn btn-primary"><input type="radio" name="options" id="option4"> Option 4</label></li>
      <li><label class="btn btn-primary"><input type="radio" name="options" id="option5"> Option 5</label></li>
     </ul>
 </label>
</div>

【讨论】：

这很接近，但并不完全准确。不过，我想我已经想出了一个解决方案。我将自己使用 $().button('toggle') 添加行为。