Question

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');

});

.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>

我们使用Bootstrap的button-dropdown组件来创建类似于体验的SELECT TAG。用户可以单击下拉列表并选择任意选项，并在按钮内立即显示相同的值（可通过鼠标和键盘访问）

第1步：点击下拉列表中的单行选项值。

第2步：现在点击下拉列表中的多行选项值。

第3步：现在再次点击下拉列表中的某个单行选项值。

问题：在第3步之后，下拉列表（即ul）不会消失。

预期结果：在第3步之后，下拉列表（即ul）应在每个选项上消失（鼠标点击和键盘使用时）。

请忽略插入符号并设计相关的小错误

Answer 1

为什么不手动关闭列表？

替换此行：

$(this).parents('.dropdown-menu').find('li').removeClass('active');

有了这个：

$(this).parents('.dropdown-menu').parent().removeClass('open').end().find('li').removeClass('active');

这将是结束代码：

＆＃13;

$('.btn-group').on('focus', '.dropdown-menu li', function() {
    $(this).siblings('.active').removeClass('active').end().addClass('active');

   //Displays selected text on dropdown-toggle button
   $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).children('a').html() + '</div>' + '<span class="caret" style="float:right;"></span>');
}).on('click mouseup', '.dropdown-menu li a', function() {
   $(this).parents('.dropdown-menu').parent().removeClass('open');
});

＆＃13;

.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>

＆＃13;

Answer 2

只需更改JS即可删除或隐藏DOM。

例如：

＆＃13;

$('.btn-group').on('focus', '.dropdown-menu li a', function() {

  $(this).parents('.dropdown-menu').find('li').removeClass('active');
  $(this).parent('li').addClass('active');


  //Displays selected text on dropdown-toggle button
  $(this).closest(":has(button)").find('button').html('<div class="dropDownSelected">' + $(this).html() + '</div>' + '<span class="caret" style="float:right;"></span>');
  
 $('.dropdown-menu').hide()


});

＆＃13;

.btn-group,
.dropdown-menu {
  max-width: 150px;
}
.dropdown-menu li a {
  white-space: normal!important;
  ;
}
.dropDownSelected {
  white-space: normal;
  margin-right: 22px !important;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div class="container">
  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Action</a>
      </li>
      <li><a href="#">Another action</a>
      </li>
      <li><a href="#">Something else here</a>
      </li>
      <li><a href="#">Separated link which is of two lines or more</a>
      </li>
    </ul>
  </div>
  <div>

＆＃13;

＆＃13; 现在，如果你运行它，它不再是下拉列表了。然后按照您想要的方式设置您创建的按钮的样式。

使用引导按钮和下拉元素自定义选择标记，如行为

2 个答案: