显示多个时最小化和最大一个 Div

Question

我在 How to maximize and minimize a div 更新了某人的编码。

我想看看我是否可以在彼此下方填充各种列表，并根据选择的列表最大化或最小化它。

但是，在测试这个时，只有第一个有效。这是什么原因？

编码：

$("#max_min_button").click(function(){
if($(this).html() == "-"){
    $(this).html("+");
}
else{
    $(this).html("-");
}
$("#news_body").slideToggle();
});

我已经测试了在 minimize maximize the div ? javascript or jquery which works for all the div 找到的一些编码，但没有用。

我在 http://wpapi.com/minimize-restore-maximize-hide-functionality-javascript-jquery/ 尝试了这个代码示例，但它也没有用。

Answer 1

我稍微调整了你的 html 和 css 并重写了 jQuery/JS 以找到下一个 news_body 并切换它。

HTML:

<div class="weekly-news">
    <div class="title_bar">Energy Group guidelines
        <div class="max_min_button">-</div>
    </div>
    <div class="news_body">Hi welcome!</div>
</div>
<div class="weekly-news">
    <div class="title_bar">Energy Group brand
        <div class="max_min_button">-</div>
    </div>
    <div class="news_body">Hi welcome!</div>
</div>

CSS:

.weekly-news{
    width:600px;
    border:solid 1px;
}

.title_bar{
    background: #FEFEFE;
    height: 25px;
    width: 100%;
}
.max_min_button{
    border:solid 1px;
    width: 25px;
    height: 23px;
    float:right;
    cursor:pointer;
}
.news_body{
    height: 250px;
    background: #DFDFDF;
}

JS:

$(".max_min_button").click(function(){
    if($(this).html() == "-"){
        $(this).html("+");
    }
    else{
        $(this).html("-");
    }
    var thisParent = $(this).parent();
    $(thisParent).next(".news_body").slideToggle();
});

演示： JSFiddle

显示多个时最小化和最大一个 Div

Minimize and Maximum one Div when many are displayed

html

javascript

jquery

minimize