Question

我注意到bootstrap dropmenus中有一个奇怪的行为：当用户点击dropmenu之外的任何地方时，之前点击过的任何突出显示的项目都会使其突出显示。

您可以在以下链接中看到：http://twitter.github.io/bootstrap/components.html#dropdowns

点击名为“操作”的项目将突出显示该项目，然后点击外面的任何位置将删除突出显示。

我认为这是设计 - 即使我不理解逻辑：一旦我点击了dropmenu中的一个项目，我希望它只有在点击另一个项目时才会被取消选择 - 而不是在菜单之外。

有关如何避免此行为的任何建议？我尝试在任何点击上使用stopPropogation - 但它不起作用。

谢谢！

Answer 1

我不知道这种行为是否会很奇怪。突出显示由链接的焦点设置。单击其他删除焦点的位置以及样式（突出显示）。

要更改此行为，请添加一个css类以在焦点上进行链接（并为以前的焦点链接删除此类）。给这个css类提供与高亮类相同的样式。

示例html ：

<div class="dropdown clearfix">
              <ul style="display: block; position: static; margin-bottom: 5px; *width: 180px;" aria-labelledby="dropdownMenu" role="menu" class="dropdown-menu">
                <li><a href="#1" tabindex="-1">Action</a></li>
                <li><a href="#2" tabindex="-1">Another action</a></li>
                <li><a href="#3" tabindex="-1">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#4" tabindex="-1">Separated link</a></li>
              </ul>
</div>

要添加的类的CSS （称为焦点）：

.dropdown-menu > li > a.focused
{
  color: #ffffff;
  text-decoration: none;
  background-color: #0081c2;
  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
  background-repeat: repeat-x;
  outline: 0;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}

<强>的javascript ：

$('.dropdown li a').focus(function(){
     $('.dropdown li a').removeClass('focused');
     $(this).addClass('focused');       

     });

示例/演示：http://bootply.com/66106

在菜单外单击时，避免不突出显示Twitter的Bootstrap下拉菜单项

1 个答案: