44

画面の上部に10pxのバーがあり、クリックすると40pxの高さまでアニメーション化し、もう一度クリックすると10pxまでアニメーション化します。divのIDを変更しようとしましたが、機能しません。どうすればこれを機能させることができますか、またはそれを行うためのより良い方法はありますか？

body html：

<div id="topbar-show"></div>

css：

#topbar-show { width: 100%; height: 10px; background-color: #000; }
#topbar-hide { width: 100%; height: 40px; background-color: #000; }

javascript：

$(document).ready(function(){
  $("#topbar-show").click(function(){
    $(this).animate({height:40},200).attr('id', 'topbar-hide');
  });
  $("#topbar-hide").click(function(){
    $(this).animate({height:10},200).attr('id', 'topbar-show');
  });
});
4

9 に答える 9

65

これを試してみてください：

$(document).ready(function(){
  $("#topbar-show").toggle(function(){
    $(this).animate({height:40},200);
  },function(){
    $(this).animate({height:10},200);
  });
});
于 2011-02-11T02:36:05.863 に答える
18

toggle-event（docs）メソッドを使用して、クリックごとに切り替わる2つ（またはそれ以上）のハンドラーを割り当てることができます。

例： http： //jsfiddle.net/SQHQ2/1/

$("#topbar").toggle(function(){
    $(this).animate({height:40},200);
},function(){
    $(this).animate({height:10},200);
});

または、独自のトグル動作を作成できます。

例： http： //jsfiddle.net/SQHQ2/

$("#topbar").click((function() {
    var i = 0;
    return function(){
        $(this).animate({height:(++i % 2) ? 40 : 10},200);
    }
})());
于 2011-02-11T02:24:31.557 に答える
18

classあなたはあなたが望むものを達成するためにを使用するべきです：

css：

#topbar { width: 100%; height: 40px; background-color: #000; }
#topbar.hide { height: 10px; }

javascript：

  $(document).ready(function(){
    $("#topbar").click(function(){
      if($(this).hasClass('hide')) {
        $(this).animate({height:40},200).removeClass('hide');
      } else { 
        $(this).animate({height:10},200).addClass('hide');
      }
    });
  });
于 2011-02-11T02:27:40.830 に答える
3

非常に遅いですが、お詫び申し上げます。これが「非効率的」である場合は申し訳ありませんが、上記のすべてが機能しないことがわかった場合は、これを試してください。1.10以上でも動作します

<script>
  $(document).ready(function() {
    var position='expanded';

    $("#topbar").click(function() {
      if (position=='expanded') {
        $(this).animate({height:'200px'});
        position='collapsed';
      } else {
        $(this).animate({height:'400px'});
        position='expanded';
      }
    });
   });
</script>
于 2013-11-16T18:03:53.480 に答える
1

私はあなたの解決策がうまくいかなかった理由をあなたに与えると思った：

が$(document).ready()実行されると、$('#topbar-show')セレクターのみがDOMから一致する要素を見つけることができます。要素は#topbar-showまだ作成されていません。

この問題を回避するには、ライブイベントバインディングを使用できます

$('#topbar-show').live('click',function(e){});
$('#topbar-hide').live('click',function(e){});

これは、ソリューションを修正するための最も簡単な方法です。これらの回答の残りの部分は、うまくいけば永続的なid属性を変更しない、より良いソリューションを提供するためにさらに進んでいます。

于 2011-02-11T02:44:25.483 に答える
1

それは可能性です：

$(document).ready(function(){
  $("#topbar").toggle(function(){
    $(this).animate({height:40},200);
  }, 
  function(){
    $(this).animate({height:10},200);
  });
});
#topbar {
  width: 100%;
  height: 10px;
  background-color: #000;
  color: #FFF;
  cursor: pointer;
}
<!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    </head>
    <body>
      <div id="topbar"> example </div>
    </body>
    </html>

于 2011-02-11T02:27:19.607 に答える
1

このトリックを使用することもできます：置換

$("#topbar").click(function(){

に

$(document).on("click", "#topbar", function(){

これにより、まだロードされていないオブジェクトのイベントがバインドされます...;）

于 2013-06-07T07:42:56.717 に答える
1

以下のコードはjQuery2.1.3で私のために働いた

$("#topbar").animate('{height:"toggle"}');

divの高さ、パディング、マージン、境界線を計算する必要はありません。お世話になります。

于 2015-09-25T20:05:49.807 に答える
0

私のために働いた：

$(".filter-mobile").click(function() {
   if ($("#menuProdutos").height() > 0) {
      $("#menuProdutos").animate({
         height: 0
      }, 200);
   } else {
      $("#menuProdutos").animate({
         height: 500
      }, 200);
   }
});
于 2017-01-31T13:13:22.270 に答える