李切換和toggleclass兒兒

Question

我有一個腳本來顯示文件夾和文件像列表中的資源管理器樹，但我認爲這是一個更好的方法去做：

$(function() { 
 
    $('.submenu').click(function(e) { 
 
    if ($(e.target).parent().hasClass('submenu')) { 
 
     e.stopPropagation(); 
 
     $(this).children('label').children('i').toggleClass('fa-folder fa-folder-open'); 
 
     //$(this).find('label > i').toggleClass('fa-folder fa-folder-open'); \t \t \t \t 
 
     $(this).children('ul').toggle(); 
 
    } 
 
    }); 
 
});

ul { 
 
    list-style: none; 
 
} 
 

 
.submenu ul { 
 
    display: none; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="submenu"> 
 
    <label><i class="fa fa-folder"></i> DIR 1</label> 
 
    <ul> 
 
     <li class="submenu"> 
 
     <label><i class="fa fa-folder"></i> DIR 2</label> 
 
     <ul> 
 
      <li class="submenu"> 
 
      <label><i class="fa fa-folder"></i> Dir 3</label> 
 
      <ul> 
 
       <li>doc1.pdf</li> 
 
       <li>doc2.pdf</li> 
 
       <li>doc3.pdf</li> 
 
       <li>doc4.pdf</li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

我D喜歡改變文件夾的圖標，但有沒有更好的方式，而不是兒童$(this).children('label').children('i')？

Answer 1

你可以使用這些選擇

$(this).find('.fa'); 

或

$(this).find('i');