JQuery рекурсивно переключает детей - PullRequest
Новая
       11

JQuery рекурсивно переключает детей

1 голос
/ 25 марта 2019

Я не эксперт по 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-plus), чтобы переключать его подкаталог. В этот момент, когда я нажимаю знак «+», все подкаталоги переключаются. Как я могу переписать этот код 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 Ответ

3 голосов
/ 25 марта 2019

Если вы добавите 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>
...