Question

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

Answer 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

Answer 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

JQuery在多个Div上显示/隐藏

3 个答案: