2

アクションごとに異なるボタンを使用して表示/非表示を表示できる簡単なコードを機能させることができましたが、このコードも適用したい6つの異なるdivがあり、一度に1つしか表示できません。それを非表示にして新しいものを表示するように表示されている場合。それらは私のページのさまざまな場所にあります。

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 
$(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 に答える
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 に答える