如何使 Bootstrap 单选按钮继续进入下拉菜单

Posted 2023-03-05

【中文标题】如何使 Bootstrap 单选按钮继续进入下拉菜单

【英文标题】：How to make a Bootstrap radio button continue into a dropdown menu

【发布时间】：2015-09-05 03:33:08

【问题描述】：

我希望有一个单选按钮，其中显示几个选项，其余选项在下拉菜单中可用。我可以通过将每个选项分配给一个类来获得我想要的交互，但是我希望下拉菜单的颜色在选择其中一个选项时更改为活动按钮颜色，而不是活动按钮颜色保留为任何最近选择了始终可见的按钮。有没有优雅的方法来做到这一点？

这是一个包含大部分功能的小提琴：https://jsfiddle.net/nqamazgz/

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-success my_data_flag active" id="one">
        <input name="options" type="radio" checked> ONE </input>
    </label>
    <label class="btn btn-success my_data_flag" id="two">
        <input name="options" type="radio"> TWO </input>
    </label>

    <div class="btn-group">
        <label class="btn btn-success dropdown-toggle" data-toggle="dropdown">
            <span id="text"> More Options </span><span class="caret"></span>
        </label>
        <ul class="dropdown-menu" id="divNewNotifications">
            <li><a class="my_data_flag" id="three"> THREE </a></li>
            <li><a class="my_data_flag" id="four"> FOUR </a></li>
        </ul>
    </div>
</div>


<!-- The following updates the text of the dropdown,
     only works if this code is after the above html -->
<script>
    $('.dropdown-toggle').dropdown();
    $('#divNewNotifications li > a').click(function()
    if (this.text !== ' More Options ')
        $('#text').text($(this).html());
    );
</script>

任何提示将不胜感激，谢谢。

【问题讨论】：

所以您只希望下拉菜单的背景颜色在打开时改变？或仅在选择某些内容后

如果从下拉菜单中选择了某些内容，我希望该项目的文本以突出显示的按钮颜色（不工作）出现（工作），并且所有其他按钮都在活动颜色（无效）。

您可以在标签上添加“活动”类（ .addClass() ）并在其他按钮上停用活动类（ .removeClass() ）。

【参考方案1】：

有点老套，但是基于 Alex 的回答：

我添加了一个标签 ID 来选择它：id="xyz" 然后在 javascript 中，删除所有具有 my_data_flag 的类的活动标志，最后将其添加到标签上。

$('.dropdown-toggle').dropdown();
    $('#divNewNotifications li > a').click(function()
    if (this.text !== ' More Options ') 
        $('#text').text($(this).html());
        $('.my_data_flag').removeClass('active');
        $('#xyz').addClass('active');
    
    );

https://jsfiddle.net/nqamazgz/5/

【参考方案2】：

可能不是那么优雅，但我是这样做的：

https://jsfiddle.net/nqamazgz/1/

$('.dropdown-toggle').dropdown();
  $('#divNewNotifications li > a').click(function()
    if (this.text !== ' More Options ') 
      $('#text').text($(this).html());
    
    $('#divNewNotifications li').css('background-color', 'white');
    $(this).closest('li').css('background-color', 'green');
);

【讨论】：

谢谢。但这并不是我的意思：我希望下拉菜单按钮本身，即始终可见的按钮，能够改变颜色，而不仅仅是菜单中的项目。 （同样，所有其他按钮都应该是未选择的颜色。）这样用户就可以对当前选择的内容有视觉反馈。