javascript - 列表打开或关闭时如何添加加号和减号图标？

Question

如何在关闭 UL 时添加加号，在打开时添加减号。

看我的代码。当列表没有子菜单时我需要添加加号图标，当列表打开时我需要添加减号图标。并在列表打开时添加 padding-left

$(document).ready(function() {
  $('ul.subcat').hide();
  $('li').click(function(event) {
    event.stopPropagation();
    $('> ul', this).toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="headcat">
<li>item 
  <ul class="subcat">
    <li>subitem 1
      <ul class="subcat">
        <li>subsubitem 1
          <ul class="subcat">
            <li>
              <p>text</p>
            </li>
          </ul>
        </li>
        <li>subsubitem 2
          <ul class="subcat">
            <li>
              <p>text</p>
            </li>
            <li>subsubsubitem 1
              <ul class="subcat">
                <li>
                  <p>text</p>
                </li>
              </ul>
            </li>
            <li>subsubsubitem 2</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>item 2</li>
  </ul>
</li>
</ul>

Answer 1

您可以toggleClass 然后使用css pseudo 您可以应用fontAwsome。检查片段。

$(document).ready(function() {
  $('ul.subcat').hide();
  $('li').click(function(event) {
    event.stopPropagation();
    $('> ul', this).toggle();
    $(this).toggleClass("active");
  });
});

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css");
.headcat li i:before {
  font-family: FontAwesome;
  content: "\f067";
  padding-right: 5px;
}

.headcat li.active i:before {
  content: "\f068";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="headcat">
  <li>item 1 <i></i>
    <ul class="subcat">
      <li>subitem 1
        <ul class="subcat">
          <li>subsubitem 1
            <ul class="subcat">
              <li>
                <p>text</p>
              </li>
            </ul>
          </li>
          <li>subsubitem 2
            <ul class="subcat">
              <li>
                <p>text</p>
              </li>
              <li>subsubsubitem 1
                <ul class="subcat">
                  <li>
                    <p>text</p>
                  </li>
                </ul>
              </li>
              <li>subsubsubitem 2</li>
            </ul>
          </li>
        </ul>
      </li>
      <li>item 2</li>
    </ul>
  </li>
</ul>