如何操作ul括號

Question

hy all，我正在創建一個手風琴菜單，當我按下「UNIT」選項卡時，會打開一個「章節」選項卡列表，當我按下任何一個章節時，課程列表打開。到目前爲止，我已經設法創建了所有適當的列表，但默認情況下，課程和章節會自動打開，而按下的課程元素不會回溯到章節父母。我的HTML5文件：

<script type="text/javascript" src="jqueryjs.js"></script> 
<script type="text/javascript" src="jqueryuiaccor.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#accordion').accordion(); 
    }); 
</script> 

<div id="container"> 
<div id="content"> 
<div id="sidebar"> 
     <ul id="accordion"> 
      <li> 
       <a href="#recent" class="heading">Unit 1</a>  
        <ul id="accordion">    
         <li> <a href="#recent" class="heading">Chapter 1 </a> </li> 
           <ul id="accordion2"> 
            <li> Lesson 1 </li> 
           </ul> 
        </ul> 
        </li> 
        <li> 
        <a href="#recent" class="heading">Unit 2</a>  

        <ul id="accordion">    
         <li> <a href="#recent" class="heading">Chapter 1 </a> </li> 
           <ul id="accordion"> 
            <li> <a href="#recent" class="heading" role="tab" aria-expanded="true">Chapter 2 </a> 
             <ul id="accordion"> 
              <li> <a href="#recent" class="heading">Lesson 1 </a></li> 
             </ul> 
            </li> 
           </ul> 
        </ul> 
      </li> 
     </ul>  
    </div> 
    </div> 
</div> 

我acorjs.js文件：

$(document).ready(function() { 
    $('ul#accordion a.heading').click(function() { 
     $(this).css('outline','none'); 
     if($(this).parent().hasClass('current')) { 
      $(this).siblings('ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
       $.scrollTo('#accordion',1000); 

      }); 
     } else { 
      $('ul#accordion li.current ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
      }); 
      $(this).siblings('ul').slideToggle('slow',function() { 
       $(this).parent().toggleClass('current'); 
      }); 
      $.scrollTo('#accordion',1000); 

     } 
     return false; 

    }); 

}); 

任何想法？

我的新編輯的文件：

<div id="container"> 
<div id="content"> 
<div id="sidebar"> 

     <ul class="accordion"> 
    <li> 
     <a href="#recent" class="heading">Unit 1</a>  
     <ul class="accordion">    
      <li> <a href="#recent" class="heading">Chapter 1 </a> </li> 
       <ul id="accordion2"> 
        <li> Lesson 1 </li> 
       </ul> 
     </ul> 
    </li> 

    <li> 
     <a href="#recent" class="heading">Unit 2</a>  
     <ul class="accordion">    
      <li> <a href="#recent" class="heading">Chapter 1 </a> </li> 
       <ul id="accordion2"> 
        <li> Lesson 1 </li> 
       </ul> 
     </ul> 
    </li> 



     </ul>  
    </div> 
    </div> 
</div> 

我的JS文件：

$(document).ready(function() { 
    $('ul.accordion a.heading').click(function() { 
     $(this).css('outline','none'); 
     if($(this).parent().hasClass('current')) { 
      $(this).siblings('ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
       $.scrollTo('#accordion',1000); 
      }); 
     } else { 
      $('ul.accordion li.current ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
      }); 
      $(this).siblings('ul').slideToggle('slow',function() { 
       $(this).parent().toggleClass('current'); 
      }); 
      $.scrollTo('#accordion',1000); 

     } 
     return false; 
    }); 
}); 

請幫一切都停止了工作

Answer 1

嘗試給ul元素唯一的ID。單位和章節的ul具有「手風琴」作爲id。如果ID不是唯一的，事件功能可能只綁定到第一個或最後一個，但不是全部。或者，使「手風琴」成爲類而不是ID。然後你的jquery需要更改爲使用「ul.accordion」而不是「ul＃accordion」。

這裏的顯示變化的HTML的一個片段：

<ul class="accordion"> 
    <li> 
     <a href="#recent" class="heading">Unit 1</a>  
     <ul class="accordion">    
     <li> <a href="#recent" class="heading">Chapter 1 </a> </li> 
     <ul id="accordion2"> 
      <li> Lesson 1 </li> 

然後換到JavaScript代碼：

$(document).ready(function() { 
    $('ul.accordion a.heading').click(function() { 
     $(this).css('outline','none'); 
     if($(this).parent().hasClass('current')) { 
      $(this).siblings('ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
       $.scrollTo('#accordion',1000); 
      }); 
     } else { 
      $('ul.accordion li.current ul').slideUp('slow',function() { 
       $(this).parent().removeClass('current'); 
      }); 
      $(this).siblings('ul').slideToggle('slow',function() { 
       $(this).parent().toggleClass('current'); 
      }); 
      $.scrollTo('#accordion',1000); 

     } 
     return false; 
    }); 
});