1

我正在尝试制作一个可以向下滑动以显示联系表单和其他一些内容的标题，由该标题内的 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")


   });  


});

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

4

4 回答 4

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 });
});
于 2012-09-24T19:56:20.213 回答
1

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

   $(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
        })
    });
});​
于 2012-09-24T19:56:33.007 回答
1

你可以做更多这样的事情

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")
    }     
});
于 2012-09-24T19:57:49.013 回答
0

尝试更改为 on() 函数：

 $(".closepanel").on('click',function(){
于 2012-09-24T19:55:40.043 回答