Родитель с вложенным элементом также вызывает дочерний элемент

Question

У меня есть этот список сортируемых элементов, используя jQuery UI Sortable, который также может вкладывать элементы.

Каждый из этих элементов содержит переключаемый контент, он будет скользить вниз при нажатии на элемент.

Однако, если щелкнуть родительский элемент во вложенном состоянии, вместо того, чтобы только переключать родительский контент, он также переключает дочерний контент.

Я пытался выяснить это в своем скрипте Jquery, но небыл в состоянии понять это.Я воспроизвел свою проблему в этой скрипке:

https://jsfiddle.net/es3hbdnm/33/

Также HTML:

<ol class="sortable panel-group">
  <li class="panel-default">
    <div class="toggle">Home</div>
    <div class="panel-content">Hidden content</div>
  </li>

  <li class="panel-default">
    <div class="toggle">About us</div>
    <div class="panel-content">Hidden content</div>
  </li>

  <li class="panel-default">
    <div class="toggle">Contact</div>
    <div class="panel-content">Hidden content</div>
  </li>
</ol>

Мой JS:

$(document).ready(function () {

  $('.sortable').nestedSortable({
    handle: 'div',
    items: 'li',
    toleranceElement: '> div'
  });


  $(".panel-default").click(function ( event ) {
    event.stopImmediatePropagation();
    $(".panel-content").not($(this)).slideUp();

    $(this).find(".panel-content").slideDown();
  });

});

Answer 1

Примечание. .find() возвращает список потомков каждого элемента в текущем наборе соответствующих элементов.Таким образом, в случае щелчка по родительскому элементу список также будет включать дочерний элемент.Сокращение набора подходящих элементов до первого в наборе должно сделать свое дело.

    $(this).find(".panel-content").first().slideDown();

РЕДАКТИРОВАТЬ: Кроме того, я предлагаю использовать следующее, чтобы иметь возможность скользить вверх по ранее скользящему элементу вниз.Смотрите также мою обновленную скрипку.Обратите внимание, что селектор, предоставленный вами для .not, не совпадает, поскольку this является узлом ".panel-default", а не узлом ".panel-content".

$(".panel-content").not($(".panel-content:first", this)).slideUp();

jsFiddle

Answer 2

Вам следует сдвинуть вниз только первый найденный «.panel-контент».

  $(".panel-default").click(function (event) {
    event.preventDefault();
    event.stopPropagation();
    $(".panel-content").not($(this)).slideUp();

    $(this).find(".panel-content:first:hidden").slideDown();
  });