Question

我尝试创建类似于此图片的下拉效果：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>

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

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

Answer 3

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

$(".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() {});
    });
});

可折叠容器/柱。添加多个链接

3 个答案: