javascript - JQuery 在多个 Div 上显示/隐藏

Question

我能够得到一些简单的代码来工作，允许我为每个 Action 使用不同的按钮来显示/隐藏，但是，我有六个不同的 div，我也想应用这个代码并且只允许一个出现在一次，如果显示一个隐藏它并显示新的。它们将位于我页面的不同位置。

我知道我可以为每个 DIV 编写单独的代码，但我确信有一种更简单的方法可以做到这一点。

我尝试了几种不同的方法，但它变得一团糟。谢谢。

这是 JS:

$(document).ready(function() {

    $(".slidingDiv").hide();
    $(".hide,.show").show();

    $('.show').click(function() {
        $(".slidingDiv").slideToggle();
        $(".show").hide();
    });

    $('.hide').click(function() {
        $(".slidingDiv").slideToggle();
        $(".show").show();
    });

});

这是 CSS:

.slidingDiv {
    height:300px;
    background-color: #99CCFF;
    padding:20px;
    margin-top:10px;
    border-bottom:5px solid #3399FF;
}

这是 HTML:

<a href="#" class="show">Show</a>
<div class="slidingDiv">
    Fill this space with really interesting content. <a href="#" class="hide">Hide</a>
</div>

Answer 1

试试这个 - DEMO

$(document).ready(function() {
    $('.show').click(function() { $(this).next().slideToggle(); });
    $('.hide').click(function() { $(this).parent().slideUp(); });
});​