Question

我具有使用Jquery UI Sortable进行排序的可排序项目列表，该列表还能够嵌套项目。

每个项目都包含可切换的内容，单击某个项目时它将向下滑动。但是，在嵌套时单击父项时，不仅切换父项内容，还切换子项的内容。

我一直试图在我的Jquery脚本中弄清楚它，但是还没弄清楚。.我在这个小提琴中重现了我的问题：

也HTML：

<ol class="sortable panel-group">
  <li class="panel panel-default">
    <div class="toggle">Home</div>
    <div class="panel-content">Hidden content</div>
  </li>
  <li class="panel panel-default">
    <div class="toggle">About us</div>
    <div class="panel-content">Hidden content</div>
  </li>
  <li class="panel 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.stopImmediatePropagation();
    $(".panel-content").not($(this)).slideUp();

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

});

Answer 1

您需要先使用is(':visible')

检查元素是否可见。

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


            $(".panel-default").click(function () {
                event.stopImmediatePropagation();
                $(".panel-content").not($(this)).slideUp();
                let x = $(this).find(".panel-content");
                if(!x.is(':visible')) x.slideDown();
            });
        });

父项也切换子项

1 个答案: