在单击中突出显示或向父 li 元素添加类答案

【问题标题】：highlight or add class to parent li element in click在单击中突出显示或向父 li 元素添加类
【发布时间】：2012-02-09 13:38:36
【问题描述】：

我正在学习 jquery 和 css。我有看起来像这样的菜单项。你可以在这里看到 css,html,jquery http://jsfiddle.net/rZR2Y/

html
<div id="nav"> 
    <ul>    
        <li><a href="#">Home</a>
            <ul>
                <li><a href="#">Home1</a></li>
                <li><a href="#">Home2</a></li>
                <li><a href="#">Home3</a></li>
            </ul>
        </li>
        <li><a href="#">Blog</a>
            <ul>
                <li><a href="#">Blog1</a></li>
                <li><a href="#">Blog2</a></li>
                <li><a href="#">Blog3</a></li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
    </ul>
</div>

jquery
$( document ).ready( function() {
   $( '#nav > ul > li' ).click( function() {
      $( '#nav > ul' ).children('li').removeClass();
      $( this ).addClass( 'selected' );
   });
   $( '#nav > ul > li > ul > li' ).click( function() {
      $( '#nav > ul' ).children('li').removeClass();
      $( this ).parent('li').addClass( 'selected' );
   });
});

css
    #nav .selected a{background:red;display:block}

我想要的是，当我单击子 li 项目即 Home1/home2/home3 时，应突出显示父 li 即 Home。

我在选择器选择中做错了什么。此外，也欢迎任何其他更好的解决方案。

谢谢。

更新： 对不起，我原来的标记是错误的。关闭 sub li 自然应该在所有子菜单项之后。现在这会改变所有 jquery 吗？

感谢您的回答。我将非常感谢一些解释，以便我也了解我做错了什么。

更新 2： 更新我的标记后，还有这样的css

    #nav .selected  > a{background:red;display:block}

即使是我原来的解决方案也有效。刚学了一些css和jquery的东西。感谢大家。更新的小提琴与更新的标记和 css 和原始 jquery 在这里 http://jsfiddle.net/rZR2Y/26/

【问题讨论】：

@Yoshi 我现在已经在这里添加了所有代码。
附带说明：您的标记不正确。结束的<li>s 应该在嵌套的<ul>s 之后。 ;)
哦，是的，我现在展示那个。现在，当我按照您所说的进行更改时，我的整个查询选择都会更改。
可能是选择器需要更改。但总的来说，我认为你的选择器对于这样一个简单的任务来说太复杂了。（我只使用简单的选择器添加了答案）

标签： javascript jquery css menu

【解决方案1】：

鉴于您的代码，您可以使用：

$('#nav').on('click', 'li', function () {
  $('#nav li').removeClass('selected');
  $(this).parentsUntil('#nav', 'li').add(this).addClass('selected');
  return false;
});

虽然我怀疑这就是你要找的东西。也许也可以尝试将您的 css 更改为：

#nav .selected > a{background:red;display:block}

演示：http://jsfiddle.net/F8dbG/2/

更新使用on 的附加选择器来减少事件绑定的数量。（感谢@diEcho）

【讨论】：

更好的方法：$('#nav ul').on('click','li', function () {
但没有得到 .add(this) 的作用
@diEcho 因为我使用的是parentsUntil，所以点击的li 没有它就不会收到.selected 类。

【解决方案2】：

你可以的

 $( document ).ready( function() {
     $( 'li' ).click( function() {
         $( 'li').removeClass('selected' );
         var $this = $( this );
         $this.addClass( 'selected' );
         $this.parent().prev().addClass( 'selected' );
     });
 });

在这里摆弄http://jsfiddle.net/rZR2Y/22/

【讨论】：

【解决方案3】：

您的子级li 元素选择器不正确，应该是#nav > ul > ul > li。

试试这个：

 $( document ).ready( function() {
     $( '#nav > ul > li' ).click( function() {
         $( '#nav > ul' ).children('li').removeClass();
         $( this ).addClass( 'selected' );
     });
     $( '#nav > ul > ul > li' ).click( function() {
         $( '#nav > ul' ).children('li').removeClass();
         $( this ).parent('ul').prev().addClass( 'selected' );
     });
 });

Example fiddle

【讨论】：

感谢它的工作。但是你能解释一下为什么它应该是#nav > ul > ul > li 而不是#nav > ul > li > ul > li。我认为我必须按顺序编写所有元素，它们就在那里。但是为什么我们需要在选择中跳过 top li。
您的第二级ul 不包含在li 中。