Select 正确的跨度和 jquery 中的 div 使用类

Question

我正在尝试创建一个单击时会折叠的导航。它正在运行，但我只想 select 单击该集。

<div class="sidenav-set">
    <a href="javascript:void(0)" onclick="toggleSet()" class="sidenav-set-link">Apply<span class="glyphicon glyphicon-chevron-down"></span></a>
    <div class="sidenav-links">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>
  </div>
  <div class="sidenav-set">
    <a href="javascript:void(0)" onclick="toggleSet()" class="sidenav-set-link">Information <span class="glyphicon glyphicon-chevron-down"></span></a>
    <div class="sidenav-links">
      <a href="#">About</a>
      <a href="#">Services</a>
      <a href="#">Clients</a>
      <a href="#">Contact</a>
    </div>

我的jquery是这样的：

function toggleSet() {
  $(".sidenav-set-link span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up")
  $(".sidenav-links").toggle('slow')
}

这可行，但它适用于所有集合。我想单击一组顶部的 link，更改 up/down 箭头上的 class 和 show/hide .sidenav-link 的组s

我已经尝试了几种方法，但都没有用，我们将不胜感激。

提前致谢。

Answer 1

您想使用 $(this) 和一个选择器来查找您要修改的元素。

function toggleSet() {
  $(this).find("span").toggleClass("glyphicon-chevron-down glyphicon-chevron-up");
  $(this).parents(".sidenav-set").find(".sidenav-links").toggle('slow');
}

Select 正确的跨度和 jquery 中的 div 使用类

Select the correct span and div in jquery using classes

jquery

selector

Select 正确的跨度和 jquery 中的 div 使用 类

Select the correct span and div in jquery using classes

jquery

selector

Select 正确的跨度和 jquery 中的 div 使用类