導航到無序列表中的上一級列表元素

Question

我試圖導航通過無序列表，並有麻煩使其完全工作。

有4個按鈕 - 截至，向下，左，並右。使用向上導航或向下導航將正確帶您前往或下一個<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> 

當前的功能級別：

使用向上和右按鈕，就可以成功地瀏覽到 「八」。期望的是，當你點擊Left按鈕，回到頂端，你會去「六」（不是「四」），然後是「三」（而不是「一」）。現在，我什麼都沒有。

我以爲使用parent() jQuery函數是要走的路，但我必須寫錯了。

我想每一次我通過點擊，我可以添加/刪除一個類（「最後一遊」），並在「迴歸」上做一個發現。我想先知道我在編寫的代碼中做了什麼錯誤。

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

Answer 1

試試這個。您需要導航到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/

Answer 2

你需要改變：

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的實例。

編輯請參閱下面的註釋。現在這更正確了。