文件瀏覽器手風琴

Question

我正在使用jquery製作一個文件瀏覽器。我想重新調整哪個li有一個類文件。但它也將子菜單重新組合爲一個文件。

我在做什麼錯？

的Jquery：

 $(document).ready(function() { 

      $("#accordion > li").click(function() { 

       if (!$(this).hasClass("active")) { 
        // Remove the class from anything that is active 
        $("li.active").removeClass("active"); 
        // And make this active 
        $(this).toggleClass("active"); 
        /*$('li').removeClass('active'); 
        $(this).addClass('active');*/ 
       } 
       if (false == $(this).next().is(':visible')) { 
        $('#accordion > ul').slideUp(300); 
       } 
       if ($('li:first-child').hasClass('file')) { 
        console.log("Is file"); 
        // handle as file 
       } else { 
        $(this).next().slideToggle(300); 
       } 

      }); 
      $("#accordion > ul li").click(function() { 
       /*$('#accordion > ul li').removeClass('active');*/ 
       $(this).addClass('active'); 
       if (false == $(this).next().is(':visible')) { 
        $('#accordion > ul li ul').slideUp(300); 
       } 
       if ($('li:first-child').hasClass('file')) { 
        console.log("Is file"); 
       } else { 
        $(this).next().slideToggle(300); 
       } 

      }); 

      $('.top:even').addClass('stripe'); 
      $('#accordion ul li:odd').addClass('stripe'); 
      $('#accordion ul li ul li:even').addClass('stripe'); 

     }); 

菜單：

   <div id="menu"> 

        <ul id="accordion"> 
         <li class="top"> 
          <a href="#"><img src="images/folder-icon.png" />Sports</a> 
         </li> 
         <ul> 
          <li> 
           <a href="#"><img src="images/folder-icon.png" />Golf</a> 
          </li> 
          <ul> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 1</a> 
           </li> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 2</a> 
           </li> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 3</a> 
           </li> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem 4</a> 
           </li> 
          </ul> 
          <li> 
           <a href="#"><img src="images/folder-icon.png" />Cricket</a> 
          </li> 
          <ul> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a> 
           </li> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a> 
           </li> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a> 
           </li> 
           <li> 
            <a class="file" href="#"><img src="images/pdf-icon.png" />Menuitem</a> 
           </li> 
          </ul> 
          <li> 
           <a href="#"><img src="images/folder-icon.png" />Football</a> 
          </li> 
         </ul> 
         <li class="top"> 
          <a href="#"><img src="images/pdf-folder-icon.png" />Technology</a> 
         </li> 
         <ul> 
          <li> 
           <a class="file" href="#">iPhone</a> 
          </li> 
          <li> 
           <a class="file" href="#">Facebook</a> 
          </li> 
          <li> 
           <a class="file" href="#">Twitter</a> 
          </li> 
         </ul> 
         <li class="top"> 
          <a href="#"><img src="images/pdf-folder-icon.png" />Latest</a> 
         </li> 
         <ul> 
          <li> 
           <a class="file" href="#">Obama</a> 
          </li> 
          <li> 
           <a class="file" href="#">Iran Election</a> 
          </li> 
          <li> 

           <a class="file" href="#">Health Care</a> 
          </li> 
         </ul> 
        </ul> 

       </div><!--- menu ---> 

Answer 1

你需要用李：第一，孩子屬性