使用列表項目使用jQuery的側欄滑動導航

Question

在側欄菜單列表項目是非常好，但在兒童下，兒童項目的兒童不滑動。

<ul class="side"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a> 
      <ul class="inner"> 
       <li><a href="#">Item 2: 1</a></li> 
       <li><a href="#">Item 2: 2</a></li> 
        <ul class="doubleinner"> 
         <li><a href="#">Item 2: 2: 1</a></li> 
         <li><a href="#">Item 2: 2: 2</a></li> 
        </ul> 
       <li><a href="#">Item 2: 3</a></li> 
       <li><a href="#">Item 2: 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 3</a> 
      <ul class="inner"> 
       <li><a href="#">Item 3: 1</a></li> 
       <li><a href="#">Item 3: 2</a></li> 
       <li><a href="#">Item 3: 3</a></li> 
      </ul> 
     </li> 
    </ul> 

我jQuery的樣子：

$(document).ready(function() { 

$('.inner li').hide(); 

$('.side > li').each(function() { 
    $(this).click(function() { 
     $('.side > li').not(this).find('li').slideUp(); 
     $(this).find('.inner li').slideDown(); 
     return false; 
    }); 
}); 
}); 

我想在班 「doubleinner」 滑動。怎麼做？我需要在「項目2：2」下上下滑動。

這裏：jsfiddle.net

這是我編碼實驗和教育劇本，我在親我還沒有。 :)

非常感謝。

Answer 1

1. 你的嵌套ul li是錯誤的。內部課堂的第二名應該在複習者之後關閉。

2. 請在js下面嘗試。

   $（文件）。就緒（函數（）{

   $('ul ul').hide(); 
   
   $('li a').click(function() 
   { 
       if(!$(this).parent('li').hasClass('open')) 
       { 
        $(this).parent('li').parent('ul').find('li.open').find('ul').slideUp(); 
        $(this).parent('li').parent('ul').find('li').removeClass('open'); 
        $(this).parent('li').addClass('open'); 
        $(this).parent('li.open').children('ul').slideDown(); 
       } 
   }); 
   

和HTML是

<ul class="side"> 
      <li><a href="#">Item 1</a></li> 
      <li><a href="#">Item 2</a> 
       <ul class="inner"> 
        <li><a href="#">Item 2: 1</a></li> 
        <li><a href="#">Item 2: 2</a> 
         <ul class="doubleinner"> 
          <li><a href="#">Item 2: 2: 1</a></li> 
          <li><a href="#">Item 2: 2: 2</a></li> 
         </ul></li> 
        <li><a href="#">Item 2: 3</a></li> 
        <li><a href="#">Item 2: 4</a></li> 
       </ul> 
      </li> 
      <li><a href="#">Item 3</a> 
       <ul class="inner"> 
        <li><a href="#">Item 3: 1</a></li> 
        <li><a href="#">Item 3: 2</a></li> 
        <li><a href="#">Item 3: 3</a></li> 
       </ul> 
      </li> 
     </ul> 

Answer 2

您應該將第二個列表項目放在第一個列表項目li中，並區分是否點擊了內部項目，或者用if來區分內部項目。下面的jsfiddle：

$(document).ready(function() { 

$('.inner li').hide(); 

$('li').each(function() { 
    $(this).click(function() { 
     $('.doubleinner > li').not(this).find('.doubleinner li').slideUp(); 
     if($(this).parent().attr('class') == 'side') 
     $(this).find('ul > li').not('.doubleinner > li').slideDown(); 
     else 
     $(this).find('.doubleinner li').slideDown();     
     return false; 
    }); 
}); 

}); 

    <ul class="side"> 
     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a> 
      <ul class="inner"> 
       <li><a href="#">Item 2: 1</a></li> 
       <li><a href="#">Item 2: 2</a> 
        <ul class="doubleinner"> 
         <li><a href="#">Item 2: 2: 1</a></li> 
         <li><a href="#">Item 2: 2: 2</a></li> 
        </ul> 
        </li> 
       <li><a href="#">Item 2: 3</a> 
        <ul class="doubleinner"> 
         <li><a href="#">Item 2: 3: 1</a></li> 
         <li><a href="#">Item 2: 3: 2</a></li> 
        </ul> 
        </li> 
       <li><a href="#">Item 2: 4</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Item 3</a> 
      <ul class="inner"> 
       <li><a href="#">Item 3: 1</a></li> 
       <li><a href="#">Item 3: 2</a></li> 
       <li><a href="#">Item 3: 3</a></li> 
      </ul> 
     </li> 
    </ul> 

JSFiddle

Answer 3

使用>child combinator你只在<li>元素結合的Click事件裏面直接.side，所以<li>內.inner不受此高清觸摸。 而你永遠不會在代碼中顯示.dinner。從代碼中不清楚是否ddinner應該是唯一的「第二級」，如果是這種情況，您可以找到一個解決方案，不會破壞您的代碼（只是增加了一些內容）：http://jsfiddle.net/MP4k4/6/