2016-12-15 53 views
1

我有問題,使用jQuery崩潰名單: -jQuery的嵌套列表倒塌

HTML文件

<ul> 
    <li class="dir">subject1 
     <ul> 
      <li class="dir">lab1 
       <ul> 
        <li>lab1.pdf</li> 
       </ul> 
      </li> 
      <li class="dir">lab2 
       <ul> 
        <li>lab2.pdf</li> 
       </ul> 
      </li> 
      <li class="dir">lab3 
       <ul> 
        <li>lab3.pdf</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="dir">subject2 
     <ul> 
      <li class="dir">lab1 
       <ul> 
        <li>lab1.pdf</li> 
       </ul> 
      </li> 
      <li class="dir">lab2 
       <ul> 
        <li>lab2.pdf</li> 
       </ul> 
      </li> 
      <li class="dir">lab3 
       <ul> 
        <li>lab3.pdf</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li class="dir">subject3 
     <ul> 
      <li class="dir">lab1 
       <ul> 
        <li>lab1.pdf</li> 
       </ul> 
      </li> 
      <li class="dir">lab2 
       <ul> 
        <li>lab2.pdf</li> 
       </ul> 
      </li> 
      <li class="dir">lab3 
       <ul> 
        <li>lab3.pdf</li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

腳本

$('.dir').click(function() { 
    $(this).children().slideToggle(); 
}); 

li標籤與dir類是文件夾和我只希望他們在點擊時崩潰。
現在我知道,即使我使用$this,每個目錄都會崩潰。我究竟做錯了什麼?

回答

1

您需要使用stopPropagation財產。

$('.dir').click(function(e) { 
    e.stopPropagation(); 
    $(this).children().slideToggle(); 
}); 

$('.dir').click(function(e) { 
 
    e.stopPropagation(); 
 
    $(this).children().slideToggle(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="dir">subject1 
 
     <ul> 
 
      <li class="dir">lab1 
 
       <ul> 
 
        <li>lab1.pdf</li> 
 
       </ul> 
 
      </li> 
 
      <li class="dir">lab2 
 
       <ul> 
 
        <li>lab2.pdf</li> 
 
       </ul> 
 
      </li> 
 
      <li class="dir">lab3 
 
       <ul> 
 
        <li>lab3.pdf</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li class="dir">subject2 
 
     <ul> 
 
      <li class="dir">lab1 
 
       <ul> 
 
        <li>lab1.pdf</li> 
 
       </ul> 
 
      </li> 
 
      <li class="dir">lab2 
 
       <ul> 
 
        <li>lab2.pdf</li> 
 
       </ul> 
 
      </li> 
 
      <li class="dir">lab3 
 
       <ul> 
 
        <li>lab3.pdf</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
    <li class="dir">subject3 
 
     <ul> 
 
      <li class="dir">lab1 
 
       <ul> 
 
        <li>lab1.pdf</li> 
 
       </ul> 
 
      </li> 
 
      <li class="dir">lab2 
 
       <ul> 
 
        <li>lab2.pdf</li> 
 
       </ul> 
 
      </li> 
 
      <li class="dir">lab3 
 
       <ul> 
 
        <li>lab3.pdf</li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </li> 
 
</ul>

+0

完美的作品,不知道這可以做到這一點無情地,你救了我的一天! – dmnmlk

+0

@dmnmlk,不要忘記接受並投票給我的答案,以幫助其他人。 –

+0

完成:)再次感謝 – dmnmlk

0

如果用div包裝你outest ul你可以做

$('div>ul>li .dir').click(function() { 
    $(this).slideToggle(); 
}); 
+0

對不起,我編輯你的答案,而不是我的答案。你能否拒絕? –

+0

好吧,但我希望每一個'鋰'類'迪爾'摺疊在列表上的不同級別 – dmnmlk

+0

@ Alexandru-IonutMihai做:) –