Как получить доступ к HTML подсписку

Question

Итак, у меня есть эта структура (это пример), первый список - список клиентов, второй - показать / скрыть документы от каждого клиента:

<ul class="first_ul">
     <li class="first_li">
          <span>ClientName</span>
          <ul class="sub_ul">
                <li class="sub_li">
                    <input type="checkbox"/>
                    <span>Document 1</span>
                    <i class="icon-circle" style="color:#11C011"></i>
                </li>
          </ul>
     </li>
</ul>

После чего следует щелчок jquery, который скрывает / показать этот подсписок.

     $(".first_ul li").on("click", function(){   
         var child = $(this).children('.sub_ul');
         child.slideToggle(); //toggle current one
     });

У меня проблема в том, что я не могу получить доступ к этому подсписку, потому что каждый раз, когда я пытаюсь нажать на этот флажок, этот подсписок скрывается, когда я нажимаю F12, чтобы увидеть, что происходит, я могу выберите только li из первого списка.

Есть ли способ решить эту проблему, например, сказав, что подсписок важнее, чем первый, подойти или я не знаю. Спасибо!

Answer 1

Используйте e.stopPropagation () на .sub_ul или где вы хотите остановить то, что в click событие !

$(".first_ul li").on("click", function() {
  var child = $(this).children('.sub_ul');
  child.slideToggle();
});

$('.sub_ul').click(function(e) {
  e.stopPropagation();
});

.first_li {
  background: lightgray;
}

.sub_ul {
  background: gray
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="first_ul">
  <li class="first_li">
    <span>ClientName</span>
    <ul class="sub_ul">
      <li class="sub_li">
        <input type="checkbox" />
        <span>Document 1</span>
        <i class="icon-circle" style="color:#11C011"></i>
      </li>
    </ul>
  </li>
</ul>

Answer 2

вам нужно использовать e.stopPropagation внутри обработчика щелчка родительского li, как показано ниже, это остановит распространение события щелчка от дочернего элемента к родительскому элементу, который вызывает событие click родительского элемента li, то есть first_li. Кроме того, добавлено, если условие для проверки выбранного элемента - это li или его дочерний элемент.

Кроме того, используйте find(), чтобы получить все дочерние элементы с классом sub_ul

$(document).ready(function(){
    $(".first_ul li").on("click", function(e){   
         e.stopPropagation();
         // return if parent not clicked
          if (e.target !== this)
             return;
         var child = $(this).find('.sub_ul');
         child.slideToggle();
     });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul class="first_ul">
     <li class="first_li">
          <ul class="sub_ul">
                <li class="sub_li">
                    <input type="checkbox"/>
                    <span>Sub Menu 1</span>
                    <i class="icon-circle" style="color:#11C011"></i>
                </li>
          </ul>
     </li>
      <li class="first_li">
          <ul class="sub_ul">
                <li class="sub_li">
                    <input type="checkbox"/>
                    <span>Sub Menu 2</span>
                    <i class="icon-circle" style="color:#11C011"></i>
                </li>
          </ul>
     </li>
      <li class="first_li">
          <ul class="sub_ul">
                <li class="sub_li">
                    <input type="checkbox"/>
                    <span>Sub Menu 3</span>
                    <i class="icon-circle" style="color:#11C011"></i>
                </li>
          </ul>
     </li>
</ul>