1

我注意到引导下拉菜单中有一个奇怪的行为：当用户点击下拉菜单之外的任何地方时，之前点击过的任何突出显示的项目都会失去突出显示。

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

单击名为“Action”的项目将突出显示它，然后单击外部任何位置将删除突出显示。

我想这是设计使然——即使我不明白其中的逻辑：一旦我点击下拉菜单中的一个项目，我希望它只有在点击另一个项目时才会被取消选择——而不是在菜单之外。

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

谢谢 ！

4

1 回答 1

0

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

要更改此行为，请添加一个 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

于 2013-06-30T21:16:03.567 回答