1

そのヘッダー内の div によってトリガーされる、下にスライドして連絡先フォームやその他のコンテンツを表示できるヘッダーを作成しようとしています。

ここに私のHTMLがあります：

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

#header-300px の margin-top があります

そして、ここに私の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

2 つの別個の関数ではなく、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 に答える