远光灯菜单项

High-light menu item

本文关键字：菜单项 远光灯      更新时间：2023-09-26

我有一个单页网站，菜单如下：

<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保持高亮度。

有什么办法解决这个问题吗？

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
    });
});

未测试，但尝试替换

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

带有

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

问题是，同级选择器只找到那个、同级，而没有找到其他元素。

相关文章：