上一个按钮单击从父级开始，而不是在菜单中的子级之间循环

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>

Any ideas?

I need to be able to click the prev button through every menu item.

If current menu is on "Engaging" sub menu, I click previous when it gets to Perspective and I click previous it jumps "Importance" click previous again it goes to "Benefits"

Answer 1

Your code isn't working because you actually have two li elements that have the active class assigned to them: the parent menu item, and the sub-menu item.

This code should take that into account:

$('.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;
});

You can see an example here: http://jsfiddle.net/rSV45/8/

In the example, only the backwards navigation works correctly, but you can use a similar approach to handle the forward navigation.