可摺疊的容器/柱子。添加多個鏈接

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>