Как сложить весь список, закрыв самый высокий элемент?

Question

С моим текущим кодом я успешно могу открывать / закрывать элементы списка один за другим, щелкая мой элемент div.Однако я бы хотел toggle еще раз все дочерние элементы, нажав на его родительский элемент.Для упрощения - когда я открываю и Level 1, и Level 2, я хотел бы сбросить их состояние, просто щелкнув элемент Level 1.

Кроме того, кажется, что мой элемент <div class="toggle-btn"></div> переключается с большей задержкойчем это брат или сестра.Почему это происходит и как это исправить?

$(function () {
    $("#collapse li").children('ul').hide();
    $(".toggle-btn").on('click', function (event) {
        $(this).next('ul').stop().slideToggle(150);
        $(this).toggleClass('active');
        event.stopPropagation();
    });
});

#collapse, ul {
    display:block;
    list-style:none;
    width: 100%;
}
#collapse li {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.toggle-btn {
  display: flex;
  overflow: hidden;
  cursor: pointer;
  padding: 5px 0px 0px 20px;
}
.toggle-btn::before {
    content: '';
    display: flex;
    position: absolute;
    height: 8px;
    width: 2px;
    background: black;
    transform: rotate(0deg);
}
		
.toggle-btn::after {
    content: '';
    display: flex;
    position: absolute;
    height: 8px;
    width: 2px;
    background: black;
    transform: rotate(90deg);
}

.active::before {
  content: '';
    display: flex;
    position: absolute;
    height: 8px;
    width: 2px;
    background: black;
    transform: rotate(90deg) !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="collapse">
  <li>Level 1
    <div class="toggle-btn"></div>
    <ul>
      <li>Level 2
        <div class="toggle-btn"></div>
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
      <li>Level 2
        <div class="toggle-btn"></div>
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
    </ul>
  </li>
    <li>Level 1
    <div class="toggle-btn"></div>
    <ul>
      <li>Level 2
        <div class="toggle-btn"></div>
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
      <li>Level 2
        <div class="toggle-btn"></div>
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
    </ul>
  </li> 
    <li>Level 1
    <div class="toggle-btn"></div>
    <ul>
      <li>Level 2
        <div class="toggle-btn"></div>
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
      <li>Level 2
        <div class="toggle-btn"></div>
        <ul>
          <li>Level 3</li>
          <li>Level 3</li>
        </ul>
      </li>
    </ul>
  </li> 
</ul>

Кроме того, похоже, что мой <div class="toggle-btn"></div>

Answer 1

Вот решение, которое я придумал:

$(function () {
    $("#collapse li").children('ul').hide();
    $(".toggle-btn").on('click', function (event) {
        $(this).next('ul').stop().slideToggle(150);
        if ($(this).hasClass('active')){
          let subActive = $(this).parent().find(".active").slice(1);
            $(subActive).each(function() {
            $(this).toggleClass('active');
                $(this).next('ul').stop().slideToggle(150);
                });
        }
        $(this).toggleClass('active');
        event.stopPropagation();
    });
});

https://jsfiddle.net/dp7148u2/

Answer 2

Прежде всего, если это для проекта, рассмотрите возможность использования библиотеки, такой как FancyTree .Эти библиотеки очень эффективны и предлагают множество вариантов настройки.

Вот решение.Я добавил новый атрибут ко всем <div> s, чтобы они сохранили свое состояние.

<div class="toggle-btn" data-div="close"></div>

Затем я обработал событие, посмотрев на этот атрибут и сбросив состояние закрытых листьев на его основе.Вот оригинальный фрагмент с внесенными изменениями:

    $(function () {
        $("#collapse li").children('ul').hide();
        $(".toggle-btn").on('click', function (event) {
            let div = $(this);
            let list = div.next('ul');
            list.stop().slideToggle(150);
            div.toggleClass('active');

            if(div.attr("data-div") === "open") {
                list.find('ul').hide();
                list.find('div').removeClass('active');
                list.find('div').attr("data-div", "close");
            }
            div.attr("data-div", "open")
            event.stopPropagation();
        });
    });

        #collapse, ul {
            display:block;
            list-style:none;
            width: 100%;
        }
        #collapse li {
            display: flex;
            width: 100%;
            flex-wrap: wrap;
        }
        .toggle-btn {
            display: flex;
            overflow: hidden;
            cursor: pointer;
            padding: 5px 0px 0px 20px;
        }
        .toggle-btn::before {
            content: '';
            display: flex;
            position: absolute;
            height: 8px;
            width: 2px;
            background: black;
            transform: rotate(0deg);
        }

        .toggle-btn::after {
            content: '';
            display: flex;
            position: absolute;
            height: 8px;
            width: 2px;
            background: black;
            transform: rotate(90deg);
        }

        .active::before {
            content: '';
            display: flex;
            position: absolute;
            height: 8px;
            width: 2px;
            background: black;
            transform: rotate(90deg) !important;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="collapse">
    <li>Level 1
        <div class="toggle-btn" data-div="close"></div>
        <ul>
            <li>Level 2
                <div class="toggle-btn" data-div="close"></div>
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2
                <div class="toggle-btn" data-div="close"></div>
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Level 1
        <div class="toggle-btn" data-div="close"></div>
        <ul>
            <li>Level 2
                <div class="toggle-btn" data-div="close"></div>
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2
                <div class="toggle-btn" data-div="close"></div>
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>Level 1
        <div class="toggle-btn" data-div="close"></div>
        <ul>
            <li>Level 2
                <div class="toggle-btn" data-div="close"></div>
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2
                <div class="toggle-btn" data-div="close"></div>
                <ul>
                    <li>Level 3
                        <div class="toggle-btn" data-div="close"></div>
                        <ul>
                            <li>Level 4</li>
                            <li>Level 4</li>
                        </ul>
                    </li>

                    <li>Level 3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>