Question

尝试做手风琴式的展示。

更好地参考我想要的显示类型： https://imgur.com/tr9cd52

你会注意到Lily的右边有一个箭头，点击它会显示下面的项目。

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

我确定你能说出我要做的是显示嵌套的风格，但是在一个盒子里创建一个手风琴效果。

工作小提琴https://jsfiddle.net/zigzag/aLb5d2uL/10/

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

这里发生了很多事情。

jQuery不包含在你的小提琴中。在Javascript面板中，单击＆＃34;齿轮＆＃34;图标并选择一个jQuery版本。
正如已经指出的那样，使用$（this）而不是$（＆＃39; this＆＃39;）因为如果你使用引号，那么你将jQuery传递给＆＃34;这个＆＃34的字符串;而不是实际的DOM元素。
在您的CSS中，您需要设置所有＆lt; ul＆gt;没有显示。您需要将其从.chartArea ul { display: none; }更改为.chartArea ul li ul {display: none; }，以便只有＆lt; ul＆gt; 里面＆lt; li＆gt;是隐藏的。

我实际上建议您稍微更改HMTL标记以使DOM导航更容易，但要使用标记执行此操作，您需要执行以下操作：

识别＆lt; a＆gt;的共同的父元素。和＆lt; ul＆gt;你想表现出来。在这种情况下，它是＆lt; li＆gt;，所以我们将树向上移动。
从这里开始，我们将向下看树＆lt; ul＆gt;这是我们想要展示的隐藏。因为只有一个，所以很容易找到它。沿着树走到这个
现在只需使用jQuery方法来显示此元素。

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

jQuery根据图标点击切换下一个ul li

1 个答案: