导航到无序列表中的上层列表元素

Question

我正在尝试浏览无序列表，但无法使其完全正常工作。

有 4 个按钮 - 向上、向下、向左 和 对。使用 Up 或 Down 导航将正确地将您带到该级别上的上一个或下一个 <li>（垂直），如果存在的话。 向右导航 将带您到 <ul> 中（向下一层）的第一个列表项，如果 <ul> 存在。

左键基本上应该颠倒顺序（上一层），但事实并非如此。

这是我的代码：

CSS

<style>
    .btn { margin: 10px; padding: 10px; background-color: #999; cursor: pointer; display: inline-block; }
    .current > span { color: red; font-weight: bold; }
</style>

HTML

<div class="left btn">Left</div>        
<div class="right btn">Right</div>      
<div class="up btn">Up</div>        
<div class="down btn">Down</div>

<ul id="demo01">
    <li class="current"><span>one</span></li>
    <li><span>two</span></li>
    <li><span>three</span>
        <ul>
            <li><span>four</span></li>
            <li><span>five</span></li>
            <li><span>six</span>
                <ul>
                    <li><span>seven</span></li>
                    <li><span>eight</span></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><span>nine</span></li>
</ul>

JS / JQuery

<script>
(function($) {
    $(document).on('click','.right', function() {
        var current = $('#demo01 li.current');
        if(current.has("ul").length){
            right = current.find('li').first();
            current.removeClass('current');
            right.addClass('current');
        }
    });

    $(document).on('click','.left', function() {
        var current = $('#demo01 li.current');
        if( current.parent.has('ul').length) {
            left = current.parent('ul li');
            current.removeClass('current');
            left.addClass('current');
        }           
    });

    $(document).on('click','.up', function() {
        var current = $('#demo01 li.current');
        if( current.prev('li').length) {
            up = current.prev('li');
            current.removeClass('current');
            up.addClass('current');
        }
    });

    $(document).on('click','.down', function() {
        var current = $('#demo01 li.current');
        if( current.next('li').length) {
            down = current.next('li');
            current.removeClass('current');
            down.addClass('current');
        }
    });
}(jQuery));
</script>

当前功能级别：

使用向上和向右按钮，您可以成功导航至"eight"。预期是当您单击 向左 按钮返回顶部时，您会转到 "six"（而不是 "four"），然后 "three"（不是 "one"）。现在，我一无所获。

我认为使用 parent() jQuery 函数是可行的方法，但我一定是写错了。

我想我每次点击时，我都可以 add/remove 一个 class ("last-visit")，当 "returning" 找到它时。我想先知道我写的代码有什么问题。

如果有人能指出正确的方向，我将不胜感激。

Answer 1

您需要更改：

if( current.parent.has('ul').length) {

至：

if( current.parent().has('ul').length) {

parent 不是 current 对象的属性。它是函数 parent().

您还需要更改此行：

left = current.parent('ul li');

至：

~~left = current.parents('li');~~

left = current.parent('ul').parent('li'); // params are optional

你上面选择的是 直接（上一级）祖先 ul 及其内部 li（即当前 current 元素）。然后，它使它不是current。因此，这不起作用。

修改后的行~~寻找任何个祖先（可以超过一级）~~上升两级以获得正确的 <li> 元素。

在 JSFiddle.net 查看工作示例。

编辑请参阅下面的评论。现在更正确了。

Answer 2

试试这个。您需要导航到 li 哪个父级 ul 4,5,6 跨度

 $(document).on('click','.left', function() {
        var current = $('#demo01 li.current');
        if(current.parent().parent().closest("li").length) 
        {
            left = current.parent().parent().closest("li");            
            current.removeClass('current');
            left.addClass('current');
        }           
    });

http://jsfiddle.net/go0yjoae/1/

导航到无序列表中的上层列表元素

Navigating to upper-level list element in unordered list

html

javascript

css

navigation

jquery