使用关闭按钮滑动屏幕 - jQuery

时间:2011-05-06 13:41:25

标签: jquery toggleclass

我正在使用slidetoggle功能打开&单击链接时关闭一个框。我希望能够在该框中添加“关闭”按钮(链接),以及能够通过slidetoggle触发器关闭它。我该怎么做?

这是我的jQuery:

$(".popup-b").hide(); 
$(".popup-l").click(function(){
    $(this).toggleClass("active").next().slideToggle(0);
    return false;
});

我的HTML

<a class="popup-l" href="#">Areas</a>
<div id="area-p" class="popup-box">
    <div class="close-this"><a href="#">Close</a></div>
    <p>This is the popup box</p>
</div>

2 个答案:

答案 0 :(得分:1)

请查看此Fiddle以查看其是否有效。

$(".popup-content").hide(); 
$(".popup-title").click(function(){
    $(this).toggleClass("active").next().slideToggle(0);
    return false;
});
$(".popup-content .close-this").click(function(){
    $(".popup-title", $(this).parents(".popup-box")).click();
    return false;
});

这样,当使用关闭链接时,也会设置active类。

您也可以在同一页面上拥有多个.popup-box

答案 1 :(得分:0)

jQuery的:

$(".popup-b").hide(); 
$(".popup-l").click(function(){
    $(this).toggleClass("active").next().slideToggle(0);
    return false;
});
$(".close-popup").click(function() {
  $(this).parent().prev().toggleClass("active").next().slideToggle(0);
);

HTML

<a class="popup-l" href="#">Areas</a>
<div id="area-p" class="popup-box">
    <div class="close-this"><a href="#" class="close-popup">Close</a></div>
    <p>This is the popup box</p>
</div>