javascript - 链接 onClick 事件只需要显示一个 DIV

Question

我有这段代码，工作正常，但问题是当我单击链接 (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。

怎么做？

Answer 1

尝试这个;

HTML：

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

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

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

jQuery：

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

这是小提琴：http: //jsfiddle.net/MrvXB/

Answer 2

您的目标是所有元素slidingDiv class，更改以下代码

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

如下并尝试

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

更新*：

您必须show_hide class作为孩子slidingDiv来处理它，请click 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();
    });
});

jsFiddle