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

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

如果你想修改你的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() {}); 
    }); 
}); 

Answer 2

只要把单个内容的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 3

这是因为你滑下内容的div是之后的头类元素（$content = $(this).next();），它适用一个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>