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

#javascript #jquery-ui

#javascript #jquery-пользовательский интерфейс

Вопрос:

У меня есть этот сортируемый список элементов с помощью 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();
  });

});

Ответ №1:

Вы должны переместить только первый найденный ‘.panel-content’.

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

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

1. Возможно, вы также знаете, как отключить функцию щелчка по содержимому в .panel-content? Например, у меня внутри него есть поле выбора, но когда я пытаюсь выбрать выделение, оно переключается обратно..

2. $('.panel-content').click(function(event){ event.preventDefault(); event.stopPropagation(); }); Добавьте его в свой код.

3. Спасибо, ты мой спаситель.

4. Послушайте, вы видели, что когда родительский элемент открыт, и вы пытаетесь его закрыть, он закрывается, но затем открывается снова?

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

Ответ №2:

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

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

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

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

jsFiddle

1. Добро пожаловать. Кстати, вызов .preventDefault() в первом ответе на самом деле не требуется. Кроме того, предложенное мной решение эквивалентно, хотя использование :first селектора, по-видимому, более эффективно.