javascript - js:slideToggle()如何正确使用显示和隐藏一个div

Question

我有这个功能

JS

$(document).ready(function(){
$(".slidingDiv").hide();
$('.toggle-next-div').click(function(event){
event.preventDefault();
$(this).next().slideToggle();
});
});

HTML

<a href="#" class="toggle-next-div">Map</a>
<div class="slidingDiv">
<strong>Content</strong>
</div>

现在我需要添加一个链接以将 div 隐藏在 div 本身内（我需要弹出窗口的“关闭按钮”）。

看来我不能像这样使用相同的功能来关闭 div

<div class="slidingDiv">
<a href="#" class="toggle-next-div">Close</a>// it doesn't work why?
<strong>Content</strong>
</div>

如何使用 div 内的“关闭”链接关闭窗口？

Answer 1

首先更改关闭 div 类，然后使用 javascript 代码关闭// 它不起作用为什么？ 内容

$(document).ready(function(){

    $(".slidingDiv").hide();

    $('.toggle-next-div').click(function(event){
    event.preventDefault();
    $(".slidingDiv").slideToggle();
    });

    //newly added code for close button
    $('.toggle-next-div2').click(function(event){
    event.preventDefault();
     $(".slidingDiv").slideToggle();
    });

});

Answer 2

尝试这个，

$(".toggle-next-div").click(function(){
    $(this).parents('.slidingDiv').slideUp();
});

http://jsfiddle.net/nKzXJ/1/