Hilight菜单项

Question

我有一个单页网站，其中包含以下菜单：

<ul id="menu-menu" class="nav">
    <li id="1"><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a>
        <ul>
            <li id="1" class="sub"><a href="#">Item 2-1</a></li>
            <li id="1" class="sub"><a href="#">Item 2-2</a></li>
            <li id="1" class="sub"><a href="#">Item 2-3</a></li>
        </ul>
    </li>
    <li id="1"><a href="#">Item 3</a></li>
    <li id="1"><a href="#">Item 4</a></li>
</ul>

菜单由javascript：

点亮

<script type="text/javascript">
 /* <![CDATA[  */   
    var J = jQuery.noConflict();
    J(document).ready(function(){

        J('.nav li:first').addClass('current');

        J('ul.nav').each(function() {
            J(this).find('li#1').each(function(i) {
                J(this).click(function(){
                    J(this).addClass('current');
                    J(this).siblings().removeClass('current');
                });
            });
        });
    }); 
    /* ]]> */  
</script>

问题在于，当我点击第3项而不是第2-2项时，第3项保持高亮。当我点击第1项时，第2-2项保持高亮。

任何想法如何解决这个问题？

Answer 1

var J = jQuery.noConflict();
J(function(){
    J('ul.nav li:first').addClass('current');

    J('ul.nav li').click(function (e) {
        J('ul.nav li.current').removeClass('current'); 
        J(this).addClass('current');
        e.stopPropagation(); // prevent the event click from bubbling up
    });
}); 

Answer 2

未经测试，但尝试替换

J(this).addClass('current');
J(this).siblings().removeClass('current');

带

J('ul.nav .current').removeClass('current');
J(this).addClass('current');

问题是兄弟选择器只找到兄弟姐妹，而不是其他元素。