Question

我创建了 DEMO

正如您所看到的，有一个 Show Div 链接。如果你点击链接，那么我的jquery代码就是这样：

$(document).ready(function() {
$('.click').click(function (e) {
    e.preventDefault();
   $('.popup').animate({'opacity':'.50'}, 300, 'linear');
   $('.popup').css('display', 'block');
   $(this).parent().next('.openingdiv').toggleClass('height');
   $(this).toggleClass('zindex');

}) 
});

因此，当您点击Show Div链接时，您可以看到close中有.openingdiv个链接。我想在点击关闭按钮时添加.popup并.openingdiv关闭。

Answer 1

您可以在代码中添加此click事件：

$('.closediv a').click(function (e) {
   e.preventDefault();
   $('.popup').animate({'opacity':'0'}, 300, 'linear');
   $('.popup').css('display', 'none');
   $(this).parents('.openingdiv').toggleClass('height');

})

如果您希望.opening div在.popup div之前关闭，那么您应该等待.opening div转换1s，然后执行.popup的代码。您可以使用setTimeout。尝试：

$('.closediv a').click(function (e) {
   e.preventDefault();
   $(this).parents('.openingdiv').toggleClass('height');
   setTimeout(function(){
     $('.popup').animate({'opacity':'0'}, 300, 'linear');
     $('.popup').css('display', 'none');
   }, 1000);
})

<强> DEMO

Answer 2

您可以为关闭按钮添加点击处理程序，如下所示，您需要删除height类

$('.closediv a').click(function(e){
    e.preventDefault();
    $('.popup').animate({'opacity':'1'}, 300, 'linear');
    $('.popup').css('display', 'none'); 
    $(this).closest('.openingdiv').removeClass('height');
  });

<强> DEMO

如何在我的代码中添加jquery close函数

2 个答案: