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

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，然后相应地应用“事件”类。

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

        }

    }

})

我拼凑了一个快速的 fiddle 来演示:http://jsfiddle.net/uXB2T/7/