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

Question

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

这是一个包含大部分功能的 fiddle :
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/