带关闭按钮的滑动切换 - jQuery

发布于 2024-11-05 23:50:25 字数 545 浏览 1 评论 0原文

我正在使用 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>

原文

I'm using the slidetoggle function to open & close a box when clicking on a link. I want to be able to add a "close" button (link) inside that box aswell as being able to close it via the slidetoggle trigger. How would i do this?

This is my jQuery:

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

My 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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

习ぎ惯性依靠 2024-11-12 23:50:27

看看这个 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。

Check out this Fiddle to see it working.

$(".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;
});

This way the active class will be setted when the close link is used too.

You can also have many .popup-box on the same page.

回复收藏 0 原文

诺曦 2024-11-12 23:50:27

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>

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>

回复收藏 0 原文

~没有更多了~