Question

我正在学习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}

我想要的是，当我点击子项目，即Home1 / home2 / home3，然后应该突出显示parent li ie Home。

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

感谢。

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

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

UPDATE2： 更新我的标记后，还有像这样的CSS

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

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

Answer 1

您的子级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

Answer 2

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

$('#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）

Answer 3

你可以做到

 $( 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/

在点击中突出显示或添加类到父li元素

3 个答案: