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

尝试这个;

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/

于 2013-09-28T13:27:06.387 回答
0

您的目标是所有元素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

于 2013-09-28T13:17:46.983 回答