jQuery 2 个点击功能，其中一个不触发

Question

我正在尝试制作一个可以向下滑动以显示联系表单和其他一些内容的标题，由该标题内的 div 触发。

这是我的 HTML:

<div id="header">
   <div id="content"></div>
   <div id="button" class="openpanel"></div>
</div>

#header 的顶部边距为 -300px

这是我的 jQuery:

  $(document).ready(function() {

    $(".openpanel").click(function(){

        $("#header").animate({

            "margin-top": "0px"

        })

      $("#button").removeClass("openpanel")
      $("#button").addClass("closepanel")


   });  


    $(".closepanel").click(function(){

        $("#header").animate({

            "margin-top": "-300px"

        }) 

      $("#button").removeClass("closepanel")
      $("#button").addClass("openpanel")


   });  


});

<小时/>

问题是它完美地向下滑动，类正确显示，但是当我第二次单击该按钮时，标题不会再次向上滑动。

Answer 1

您的代码存在的问题是，绑定(bind)点击处理程序时 .closepanel 不存在。在这种情况下，您可以使用 .on 将事件委托(delegate)给容器/文档对象。

见下文，

更改 $(".openpanel").click(function(){ 如下，

$("#header").on('click', '.openpanel', function(){

和

更改$(".closepanel").click(function(){

$("#header").on('click', '.closepanel', function(){

您可以使用单个函数来实现您正在做的事情，

$('#button').on('click', function () {
    var mTop = 0;
    if ($(this).hasClass('openpanel')) {
        $(this).removeClass('openpanel').addClass('closepanel');
    } else {
        mTop = -300;
        $(this).removeClass('closepanel').addClass('openpanel'); 
    }

    $("#header").animate({ "marginTop": mTop });
});