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

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

见下文，

如下所示更改$(".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 });
});

Answer 2

尝试在一个函数中编写按钮的处理程序，而不是两个单独的函数。

   $(document).ready(function() {

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

        $("#header").animate({
            "margin-top": margin
        })
    });
});

Answer 3

你可以做更像这样的事情

HTML：

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

jQuery的：

$(document).ready(function() {

$("#button").click(function(){
    var $self = $(this);
    if ($self.hasClass("openpanel")) {
      $("#header").animate({
          "margin-top": "0px"
      })
      $self.removeClass("openpanel")
      $self.addClass("closepanel")
    } else if ($self.hasClass("closepanel")) {
      $("#header").animate({
        "margin-top": "-300px"
      }) 
      $self.removeClass("closepanel")
      $self.addClass("openpanel")
    }     
});

Answer 4

尝试更改为on（）函数：

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

jQuery 2单击功能，一个不触发

4 个答案: