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

您使用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

Answer 2

试试这个;

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/

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

2 个答案:

HTML：

jQuery的：