Question

我试图浏览无序列表并且无法使其完全正常工作。

有4个按钮 - Up ， Down ， Left 和 Right 。使用向上或向下导航将正确地将您带到该级别上的前一个或下一个<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>

目前的功能级别：

使用 Up 和 Right 按钮，您可以成功导航到＆＃34; 8＆＃34;。期望是当你点击左按钮，回到顶部时，你会去＆＃34;六＆＃34; （不是＆＃34;四＆＃34;），然后＆＃34;三＆＃34; （不是＆＃34;一个＆＃34;）。现在，我什么也没得到。

我认为使用parent() jQuery函数是可行的方法，但我必须写错误。

我想每次点击时，我都可以添加/删除一个班级（＆＃34;最后一次访问＆＃34;），当＆＃34;返回＆＃34;做一个发现。我想首先知道我在编写的代码中做错了什么。

如果有人能指出我正确的方向，我会很感激。

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。因此，这不起作用。

修改后的行~~查找任何祖先（可以多出一个级别）~~上升两个级别以获得正确的{ {1}}元素。

请参阅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/

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

2 个答案: