Предыдущее нажатие кнопки начинается с родительского элемента вместо циклического перехода по дочерним элементам в меню

Question

$('.navigation a.prev').on('click', function(){
    if(!$("#menu ul li.active").length){
        return false;
    }

    if($("#menu ul li.active").prev().length){
        if($("#menu>ul>li.active").find('li').last().length && !$("#menu>ul>li.active").find('li.active').length){
            $("#menu ul li.active").find('li').last().children('a').click();
        } else {
            $("#menu ul li.active").prev().children('a').click();
        }
    } else {
        if($("#menu ul li.active").closest('li').prev().length){
            $("#menu ul li.active").closest('li').prev().children('a').click();
        }
    }

    return false;
});


<div class="menu" id="menu">
<ul>
<li class="active"><a href="ajax/2.html" rel="ajax-content">About</a></li>
<li><a href="ajax/4.html" rel="ajax-content">Objectives</a></li>
<li class="sub-menu"><a href="ajax/5.html" rel="ajax-content">**Importance**</a>
<ul class="submenu">
<li><a href="ajax/9.html" rel="ajax-content">Need</a></li>
<li><a href="ajax/13.html" rel="ajax-content">**Benefits**</a></li>
</ul>
</li>
<li class="sub-menu">
<a href="ajax/14.html" rel="ajax-content">District</a>
<ul class="submenu">
<li><a href="ajax/15.html" rel="ajax-content">Perspective</a></li>
<li><a href="ajax/17.html" rel="ajax-content">Example</a></li>
<li><a href="ajax/19.html" rel="ajax-content">Leadership</a></li>
<li><a href="ajax/20.html" rel="ajax-content">**Engaging**</a></li>

</ul>
</li>
</ul>
</div>

Есть идеи?

Мне нужно иметь возможность нажимать кнопку "Предыдущая" в каждом пункте меню.

Если текущее меню находится в подменю "Вовлечение", я нажимаю предыдущее, когда оно попадает в Перспективу, и нажимаю предыдущее, оно переходит "Важность", снова нажимает предыдущее, оно переходит в "Преимущества".

Answer 1

Ваш код не работает, потому что у вас есть два li элементы, которые имеют active назначенный им класс: родительский элемент меню и элемент подменю.

Этот код должен учитывать это:

$('.navigation a.prev').on('click', function () {
    var $activeItems = $("#menu ul li.active");
    if (!$activeItems.length) {
        return false;
    }

    var $parentItem = $activeItems.eq(0);
    var $subItem = $activeItems.eq(1);

    var $prevSubItem = $subItem.prev();
    if ($prevSubItem.length) {
        $prevSubItem.children('a').click();
    } 
    else {
        // If there is a sub-item currently selected
        if($subItem.length) {
            $parentItem.children('a').click();
        }
        else {
            var $prevParentItem = $parentItem.prev();
            if($prevParentItem.length) {
                $prevParentItem.find('a').last().click();
            }                
        }
    }

    return false;
});

Вы можете увидеть пример здесь: http://jsfiddle.net/rSV45/8/

В этом примере только обратная навигация работает правильно, но вы можете использовать аналогичный подход для обработки прямой навигации.