2

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

3 回答 3

1

试试这个 -演示

$(document).ready(function() {
    $('.show').click(function() { $(this).next().slideToggle(); });
    $('.hide').click(function() { $(this).parent().slideUp(); });
});​
于 2012-08-18T10:07:42.277 回答
0 
$(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()
    });
});​

小提琴

于 2012-08-18T10:21:10.933 回答
0 
$(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();
    });

});

一些演示

于 2012-08-18T10:09:34.160 回答