打开子菜单时保持导航列表项处于选中状态

Question

如何更改 CSS 以使主菜单列表项在单击时保持选中状态？我可以在悬停时更改背景颜色，但我真的很想在单击时更改背景颜色，直到单击其他内容为止。我的子菜单在单击时显示，而不是悬停，这就是悬停对我不起作用的原因。

例如，在 www.IBM.com 上，主菜单中所选列表项的样式在单击时会更改，而不仅仅是在悬停时更改。

这是我所拥有的：

<div class="header">
  <ul class="site-nav">
    <li class="first">
       <a href="#">Home</a>
    </li>
    <li>
       <div class="quick-more">
       <a class="drop-link">Support</a>
        <ul class="dropdown" style="display: block;">
       ......etc.
    <li>Community</li>
    <li>Contact</li>
  </ul>
</div>

在我的 CSS 中，我有以下内容：

.site-nav {
  background: #1f78c3;
  }
.site-nav .dropdown {
 background: #fff;
 padding: 0;
 border: 0;
 }
.site-nav li a:hover{
 background: #fff;
 color: #1f78c3;
 }

我也尝试过a：visited和a：target，但两者都没有成功。知道我错过了什么吗？

Answer 1

正如

@htmltroll和@Joel所说，你需要使用一点JS（在我的例子中是jQuery）来实现这一点，因为CSS不处理点击事件。

为了使它更加模块化，你可以检查是否有任何.site-nav li有一个嵌套的ul，然后相应地应用"active"类。

// any <li> that is a direct descendant of 'site-nav
var links = $('.site-nav').find('> li');
// bind the click event 
links.on('click', function() {
    var clkd = $(this);
    // if the <li> has a <ul> in it
    if(clkd.has('ul').length) {
        // and if that <li> doesn't have the 'active' class
        if(!clkd.hasClass('active')) {
            // Add the active class to the <li>
            clkd.addClass('active');
        } else {
            // if the dropdown was already open, remove class to close
            clkd.removeClass('active');
        }
    }
})

我快速摆出

一个小提琴来演示：http://jsfiddle.net/uXB2T/7/

Answer 2

您可以将 .selected 添加到不同页面上的链接，并使用 CSS 定位它。

Answer 3

我会使用的方法是javascript/jQuery方法。

与htmltroll所说的类似，创建一个类，例如.selected，它具有您希望活动链接具有的所有样式。然后在javascript中，添加如下内容：

$(your-links).click(function(){
  if (!$(this).hasClass("selected"))$(this).addClass("selected");
})

类似的东西。