可折叠容器/列。添加多个链接答案

【问题标题】：Collapsible container/column. Adding more than one link可折叠容器/列。添加多个链接
【发布时间】：2016-04-28 02:56:00
【问题描述】：

我正在尝试创建类似于此图像的下拉效果：GIF，但是到目前为止我所拥有的：EXAMPLE 我似乎无法找到添加多个链接的方法，如果我确实添加了另一个内容 div，它就不会显示出来。希望有人能提供帮助，为此一直失眠哈哈。谢谢

HTML：

<div class="container">
  <div class="header">Projects</div>
  <div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>

JS：

$(".header").click(function() {
  $header = $(this);
  //getting the next element
  $content = $(this).next();
  //checking if its already visible
  $content.slideToggle(500, function() {
    //execute this after slideToggle is done
    //change text of header based on visibility of content div
    $header.text(function() {});
  });
});

我会尝试什么：

<div class="container">
  <div class="header">Projects</div>
  <div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
    </div>

【问题讨论】：

jsfiddle.net/sfcm95yz/6 在你的下方查看我的代码

标签： javascript jquery html css drop-down-menu

【解决方案1】：

只需将所有链接放在一个内容 div 中：

https://jsfiddle.net/sfcm95yz/3/

<div class="content">
  <div class="item" onlclick="initContent('example')">
    <em>Example Project</em>
  </div>
  <div class="item" onlclick="initContent('example2')">
    <em>Example Project 2</em>
  </div>
</div>

【讨论】：

【解决方案2】：

这是因为您正在向下滑动位于标题类元素 ($content = $(this).next();) 之后的内容 div，它对其应用了 display: block。如果您添加另一个内容 div，它不会紧跟在该标题之后，因此不会显示。

您可以更改您的 JavaScript 以针对所有内容 div，或重新排列您的 HTML，如下所示：

<div class="container">
  <div class="header">Projects</div>
  <div class="content">
    <div onclick="initContent('example')">
      <em>Example Project</em>
    </div>
    <div onclick="initContent('example')">
      <em>Example Project 2</em>
    </div>
    <div onclick="initContent('example')">
      <em>Example Project 3</em>
    </div>
  </div>
</div>

【讨论】：

【解决方案3】：

如果您想修改您的 JS 并保留现有标记，.nextAll() 将选择 $header 的所有兄弟姐妹（.next() 仅选择一个兄弟姐妹）。您还可以添加一个选择器参数，以确保您只选择具有“内容”类的元素。

$(".header").click(function() {
    $header = $(this);
    //getting the sibling ".content" elements
    $content = $(this).nextAll(".content");
    //checking if its already visible
    $content.slideToggle(500, function() {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function() {});
    });
});

【讨论】：