Question

我有一个脚本来显示文件夹和文档，就像带有列表的资源管理器树一样，但我认为还有更好的方法：

＆＃13;

$(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');				 
      $(this).children('ul').toggle();
    }
  });
});

＆＃13;

ul {
  list-style: none;
}

.submenu ul {
  display: none;
}

＆＃13;

<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>

＆＃13;

我想更改文件夹的图标，但是有更好的方法而不是孩子$(this).children('label').children('i')吗？

Answer 1

您可以使用这些选择器

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

或

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

li切换和toggleclass儿童

1 个答案: