Пункт меню 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');

.

Проблема состоит в том, что селектор брата находит только то,а не другие элементы.