Question

我使用jquery创建了切换效果。我想用右上方的关闭按钮关闭一个弹出式div，而不会影响当前的切换效果。

演示，请参阅链接。

$(document).ready(function(){
     $(".infoBtn").click(function(){
           $(".popUpDiv").toggle("fast");
           //$(this).toggleClass("active");
           return false;
     });
});

jsfiddle link

Answer 1

使用：$(".infoBtn, .closePopsUp").click(function(){

Answer 2

在点击事件中使用多个选择器

    $(".infoBtn,.closePopsUp").click(function(){
    $(".popUpDiv").toggle("fast");

    return false;
});

fiddle here

Answer 3

您的选择器字符串中可以有多个选择器：

$(document).ready(function(){
     $(".infoBtn, .closePopsUp").click(function(){
           $(".popUpDiv").toggle("fast", function(){
               //animation complete
               $(this).toggleClass("active");
           });
           return false;
     });
});

我还添加了在动画完成后切换类的功能。这是一个很好的做法，因为它确保应用于此类的任何CSS规则不会影响动画。

<强>来源（S）

http://api.jquery.com/toggle/

http://api.jquery.com/category/selectors/

Answer 4

如果在#closePopsPan

的点击事件中也可以这样做

$(document).ready(function(){

                $(".infoBtn").click(function(){
                    $(".popUpDiv").toggle("fast");
                    //$(this).toggleClass("active");
                    return false;
                });

    $("#closePopsPan").on("click",function(){
        $(".popUpDiv").toggle("fast");
    });
            });

更新后的jsfiddle链接为http://jsfiddle.net/Rm3sC/8/

如何处理jquery中其他关闭按钮的切换事件？

4 个答案: