JQuery在多个Div上显示/隐藏

I was able to get some simple code to work that allows me to show/hide using diffrent buttons for each action, but, I have six different divs that I want to apply this code too and only allow for one to appear at a time and if one is shown to hide it and display the new one. They will be at different places in my page.

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

I know that I could just write individual code for each DIV, but I'm sure there's an easier way to do it.

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

I tried a couple different methods, but it just gets messy. Thanks.

我尝试了几种不同的方法,但它只是变得混乱。谢谢。

Here's the JS:

这是JS:

$(document).ready(function() {

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

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

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

});

Here's the CSS:

这是CSS:

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

Here's the HTML:

这是HTML:

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

3 个解决方案

#1

Try this - DEMO

试试这个 - DEMO

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

#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();
    });

});

some 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

#1