Question

我需要ul.list-group-sub乍一看才能显示，当我点击＆＃34;点击＆＃34; （.dd），只有一个＆＃34; list-group-sub＆＃34;应该显示来自当前li的块，而＃34; list-group-sub＆＃34;应该不显示其他li，反之亦然，只有一个是一个＆＃34; list-group-sub＆＃34;一次开放

小提琴演示： https://fiddle.jshell.net/alpeshlahad/zv3vpzew/3/

＆＃13;

$(".list-group-item .dd").click(function() {
  $("ul.list-group-sub").slideToggle();
});

＆＃13;

ul.list-group-sub {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
  <li class="list-group-item">
    List 1
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
  <li class="list-group-item">
    List 2
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
</ul>

＆＃13;

Answer 1

问题是因为您的ul.list-group-sub选择器正在对所有元素调用slideToggle()。您需要遍历DOM以查找与单击的.dd元素相关的DOM。为此，您可以使用closest()获取父li，然后find()获取您需要的元素。

要仅显示一个菜单，您还需要在切换目标菜单时调用slideUp()。试试这个：

$(".list-group-item .dd").click(function(e) {
  e.preventDefault();
  var $target = $(this).closest('li').find("ul.list-group-sub").slideToggle();
  $('ul.list-group-sub').not($target).slideUp();
});

ul.list-group-sub { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
  <li class="list-group-item">
    List 1
    <span class="label">
      <a href="#" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
  <li class="list-group-item">
    List 2
    <span class="label">
      <a href="#" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
</ul>

另请注意，我已在javascript;元素的href属性中删除了a。您可以在事件上调用preventDefault()来停止默认行为。这种方法的好处是可以从HTML中解耦JS逻辑。

Answer 2

$("ul.list-group-sub").slideToggle()定位所有子项。使用此：

$(this).closest('.list-group-item').find('.list-group-sub').slideToggle();

定位相应的列表子项目。

请参阅下面的演示并更新fiddle here：

＆＃13;

$(".list-group-item .dd").click(function() {
  $(this).closest('.list-group-item').find('.list-group-sub').slideToggle();
});

＆＃13;

ul.list-group-sub {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list-group member-list trainers-data ot-box">
  <li class="list-group-item">
    List 1
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
  <li class="list-group-item">
    List 2
    <span class="label">
      <a href="javascript:;" class="dd">Click</a>
    </span>
    <ul class="list-group-sub">
      <li class="list-group-item checked">Sublist 1</li>
      <li class="list-group-item checked">Sublist 2</li>
      <li class="list-group-item checked">Sublist 3</li>
    </ul>
  </li>
</ul>

＆＃13;

在每个列表中向下滑动

2 个答案: