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

时间:2015-06-19 08:15:10

标签: html twitter-bootstrap drop-down-menu radio-button

我想要一个带有几个选项的单选按钮,其余部分可以在下拉菜单中找到。我可以通过将每个选项分配给一个类来获得我想要的交互,但我希望下拉菜单的颜色在选择其中一个选项时更改为活动按钮颜色,而不是保留的任何活动按钮颜色始终可见按钮最近被选中。是否有一种优雅的方式来做到这一点?

这是大多数功能的小提琴:
https://jsfiddle.net/nqamazgz/

StringBuilder

任何提示都将不胜感激,谢谢。

2 个答案:

答案 0 :(得分:3)

有点hacky但是,基于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/

答案 1 :(得分:0)

可能不是那么优雅但是我的表现如何:

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