jQuery toggle next ul li 基于图标点击

Question

尝试做 Accordion 风格的展示。

更好地引用我想要的显示类型: https://imgur.com/tr9cd52

你会注意到 Lily 的右边有一个箭头，点击它应该会显示下面的元素。

我的挑战是正确遍历 DOM 以找到下一个 ul 以在单击按钮时显示/隐藏。我该怎么做？

我相信您可以看出我正在尝试做的是显示嵌套样式，但在一个框中以创建 Accordion 效果。

工作 fiddle https://jsfiddle.net/zigzag/aLb5d2uL/10/

$('.menu-toggle').click(function(e) {
  e.preventDefault(); // prevent <a> to redirect to the top of the page
  $(this).nextall('ul').toggle();
});

.chartArea {
  padding: 20px 20px 0 0;
}

ul {
  list-style-type: none;
}

.glyphicon {
  color: white;
}

.tile {
  margin: 10px;
  padding: 20px;
  background-color: gray;
  font-family: segoe UI;
  color: white;
  min-height: 150px;
}

.empDetails {
  font-size: 14px;
  color: white;
}

.chartArea ul li {
  display: none;
}

.chartArea>ul>li {
  display: block;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="container-fluid chartArea">
  <ul>
    <li>
      <div class="tile">Adam</div>
    </li>
    <li>
      <div class="tile">
        <div class="col-sm-2 img_tile">
          <img src="http://via.placeholder.com/50x50">
        </div>
        <div class="col-sm-8 empDetails">
          <h4>
            Lily
          </h4>
          <p>
            Director
          </p>
          <p>
            Ensure quality and timely delivery through resource and time management.
          </p>
        </div>
        <div class="col-sm-2 toggle_button">
          <a class="menu-toggle" href="#">
            <span class="glyphicon glyphicon-menu-down"></span>
          </a>
        </div>
      </div>
      <ul>
        <li>
          <div class="tile">
            <div class="col-sm-2 img_tile">
              <img src="http://via.placeholder.com/50x50">
            </div>
            <div class="col-sm-8 empDetails">
              <h4>
                Sen
              </h4>
              <p>
                Manager
              </p>
              <p>
                Ensure quality and timely delivery through resource and time management.
              </p>
            </div>
          </div>
        </li>
        <li>
          <div class="tile">Another Sen</div>
          <ul>
            <li>
              <div class="tile">Sen jr</div>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="tile">Justin</li>
  </ul>
</div>

大部分代码贴在上面。我有一些嵌套的 UL Li 标签，但找不到一种方法来创建每次点击时折叠或显示对象列表的逻辑。

Answer 1

这里发生了很多事情。

1. jQuery 未包含在您的 fiddle 中。在 Javascript 面板内，点击“齿轮”图标并选择一个 jQuery 版本。
2. 正如已经指出的那样，使用 $(this) 而不是 $('this') 因为如果您使用引号，那么您将向 jQuery 传递一个“this”字符串而不是实际的 DOM 元素。
3. 在您的 CSS 中，您将所有
   设置为不显示。您需要将其更改为 .chartArea ul { display: none; } 到 .chartArea ul li ul {display: none; } 这样只有
   • 被隐藏。

我实际上建议您稍微更改 HTML 标记以使 DOM 导航更容易，但要使用您的标记来做到这一点，您需要可以执行以下操作:

1. 确定您要显示的 和
   共有的父元素。在本例中，它是
   • ，因此我们将在树上向上移动到它。
   • 从这里开始，我们将在树下查找要显示的隐藏的
     。因为只有一个，所以很容易找到。下树到这个
     • 现在只需使用 jQuery 方法来显示此元素。

这是 fiddle 。请注意，我更改了您的 jQuery 和一个 CSS 规则。 https://jsfiddle.net/f4m22hmy/1/