Блог

Главная - Вопросы по программированию - jQuery рекурсивно переключает дочерние элементы

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

#javascript #jquery #toggle #children #subdirectory

#javascript #jquery #переключение #дочерние элементы #подкаталог

Вопрос:

Я не эксперт по jQuery, так что вот оно. У меня есть HTML, который выглядит следующим образом:

 <ul class="first-class">
   <li class="second-class">
      <a href="#_">
        <i class="fa fa-plus"></i>
      </a>
      <ul class="subdirectory-class">
         <li class="second-class">
            <a href="#_">
              <i class="fa fa-plus"></i>
            </a>
            <ul class="subdirectory-class">
               <li class="second-class">
                  <a href="#_">
                     <i class="fa fa-plus"></i>
                  </a>
               </li>
            </ul>
         </li>
     </ul>
   </li>
   <li class="second-class">
      <a href="#_">
         <i class="fa fa-plus"></i>
      </a>
      <ul class="subdirectory-class">
         <li class="second-class">
            <a href="#_">
              <i class="fa fa-plus"></i>
            </a>
         </li>
     </ul>
   </li>
</ul>

Итак, что я хотел бы сделать, это нажать знак (fa fa-плюс), чтобы переключить его подкаталог. На данный момент, когда я нажимаю знак , все подкаталоги переключаются.
Как я могу переписать этот код jquery, чтобы достичь этого?

Если я нажму первый знак , должен открыться следующий, и только следующий подкаталог. Затем, когда я нажимаю на подкаталог, должен открыться следующий подкаталог и так далее. Это относится и к заключительной части.

JQUERY в настоящее время у меня есть это:

 $(document).ready(function(){
    $(".first-class .second-class").click(function(e){
        $(".subdirectory-class", this).first().slideToggle("fast");
        $(this).children("a").toggleClass("closed open");
        e.preventDefault();
    });
});

Это скрывает каждый ul, принимающий основной (с отображением css: нет), и когда я нажимаю на него, он переключает все подкаталоги.

Любая помощь была бы очень признательна.

Заранее спасибо

Комментарии:

1. давай начнем с того, что это не главное. Это фиктивные классы

2. @Mamun Я не верю, что должно быть , .first-class — это ul и .second-class — это все li

Ответ №1:

Если вы добавите e.stopImmediatePropagation() в свой код, он будет выполняться по вашему желанию.

 $(document).ready(function() {
  $(".second-class").click(function(e) {
    $(this).find(".subdirectory-class").first().slideToggle("fast");
    $(this).children("a").toggleClass("closed open");
    e.stopImmediatePropagation()
  });
});

ДЕМОНСТРАЦИЯ

 $(document).ready(function() {
  $(".second-class").click(function(e) {
    $(this).find(".subdirectory-class").first().slideToggle("fast");
    $(this).children("a").toggleClass("closed open");
    e.stopImmediatePropagation()
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first-class">
  <li class="second-class">
    <a href="#_">1
      <i class="fa fa-plus"></i>
    </a>
    <ul class="subdirectory-class">
      <li class="second-class">
        <a href="#_">11
          <i class="fa fa-plus"></i>
        </a>
        <ul class="subdirectory-class">
          <li class="second-class">
            <a href="#_">111
              <i class="fa fa-plus"></i>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li class="second-class">
    <a href="#_">2
      <i class="fa fa-plus"></i>
    </a>
    <ul class="subdirectory-class">
      <li class="second-class">
        <a href="#_">22
          <i class="fa fa-plus"></i>
        </a>
      </li>
    </ul>
  </li>
</ul>