Как добавить плюс значок минус, когда список открыт или закрыт?

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>

Answer 2

Если вы используете jQuery, вы можете просто добавить класс, который указывает текущее состояние родительского элемента li, а затем стилизовать родительский элемент li на основе этого класса.

Проверьте эту скрипку: Переключаемые подменю