0

私はこのコードを持っていますが、問題はありませんが、リンクをクリックすると (1) すべての DIV が表示されますが、各リンクには独自の div のみを表示する必要があります。

Java スクリプト

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

<a href="#" class="show_hide">Map</a> //Link(1)
<div class="slidingDiv">
<a href="#" class="show_hide">hide</a>
</div>

<a href="#" class="show_hide">Map</a>//Link(2)
<div class="slidingDiv">
<a href="#" class="show_hide">hide</a>
</div>

<a href="#" class="show_hide">Map</a>//Link(3)
<div class="slidingDiv">
<a href="#" class="show_hide">hide</a>
</div>
//...............And so on.....

これらのリンクのいずれかをクリックすると、すべての DIV が表示されますが、独自の DIV だけが表示されます。

どうやってするか？

4

2 に答える 2

0

ですべての要素をターゲットにしていますslidingDiv class、以下のコードを変更

$(".slidingDiv").slideToggle();

以下のようにして試してください

$(this).next(".slidingDiv").slideToggle();

アップデート*：

あなたはそれを処理するためのshow_hide class子として、以下のコードを試していますslidingDivclick event

$(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
        var div =  $(this).next(".slidingDiv");
        console.log(div);
        if (!div.length) {
            div = $(this).parent('.slidingDiv');
        }
        console.log(div);
        div.slideToggle();
    });
});

jsフィドル

于 2013-09-28T13:17:46.983 に答える