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

Question

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

这是一个包含大部分功能的小提琴：
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>

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

Answer 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/

Answer 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');
});