JQuery 在多个 div 上显示/隐藏答案

【问题标题】：JQuery Show/Hide on Multiple DivsJQuery 在多个 div 上显示/隐藏
【发布时间】：2012-08-18 10:01:57
【问题描述】：

我能够获得一些简单的代码来工作，允许我使用不同的按钮来显示/隐藏每个操作，但是，我有六个不同的 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>

【问题讨论】：

标签： javascript jquery html css show-hide

【解决方案1】：

试试这个 - DEMO

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

【讨论】：

如果他们点击显示另一个，我如何让它隐藏显示的一个？我只想一次显示一个。
我注意到我必须将 a 标签与 div 组合在一起才能使其正常工作。有没有一种方法可以列出所有 a 标签，然后列出所有 div 而不会破坏？

【解决方案2】：

$(document).ready(function() {

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

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

    $('.hide').click(function() {
        $(this).parent().slideToggle();
        $(this).parent().prev(".show").show();
    });

});

一些demo

【讨论】：

【解决方案3】：

$(function() {
    $(".slidingDiv").hide();
    $(".hide, .show").show().on('click', function(e) {
        var elm = $(e.target).is('.show') ? $(e.target) : $(e.target).parent().prev('.show');
        elm.toggle().next(".slidingDiv").slideToggle()
    });
});

FIDDLE

【讨论】：