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

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

有点笨拙，但基于亚历克斯的回答：

我添加了一个标签 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');
});