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>

有什么想法吗？

我需要能够通过每个菜单项单击“上一步”按钮。

如果当前菜单位于“Engaging”子菜单上，我点击上一个到达Perspective时我点击上一步跳转“重要性”再点击上一步“好处”

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/

在示例中，只有向后导航才能正常工作，但您可以使用类似的方法来处理前向导航。

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

1 个答案: