1

jqueryを使用して、ボタンが押されると拡大および縮小する単純なトグルサイドバーを作成しようとしています。また、ボタンを押すと別の種類のボタンに変わります。サイドバーが展開されますが、何らかの理由で元の位置に戻りません。javascript と html のコピーは、http: //www.jqueryhelp.com/viewtopic.php?p=4241#4241 で確認できます。

これが実際のコードです。Bendeway に感謝します。:D

$(".btn-slide").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "show", left: 250}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
}); 

$(".active").live('click', function(e){ 
   e.preventDefault();

   $("#sidebar").animate({opacity: "hide", left: 100}, "slow"); 
   $(this).toggleClass("btn-slide").toggleClass("active");
});
4

4 に答える 4

0 

$(function() {
  var ecswitch = 1;
  /* prevent the annoying scroll back up thing */
  $("#ec").click(function(e) {
    e.preventDefault();
    var x = $("#main").width(); // get element width
    var y = $("#main").height(); // get element height 
    if (ecswitch == 1) {
      $("#main").animate({
        opacity: 0,
        hieght: "0",
        width: "0"
      }, 1300);
      ecswitch = 0;
    } else {
      $("#main").animate({
        opacity: 1,
        hieght: y,
        width: x
      }, 1300);
      ecswitch = 1;
    }
  });
});
#main {
  height: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
  <a href="#" id="ec">Expand / Contract</a>
  <div id="main">
    Watch Me Shrink Or Grow
  </div>
</div>

私はこれを少し違う方法で行うことにしました。これは、実験の高さが200pxで初期化され、幅は自動的に行われます。ハイパーリンクをクリックすると、実験は1.3秒で非表示になり、スイッチは0に設定されます。もう一度クリックすると、1.3秒後に戻り、スイッチはライトスイッチのように1に戻ります。単純なフェードまたは非表示で退屈したため、ここでアニメーションを使用しました...

ゼロ化する前に要素の幅と高さを取得した理由は、アニメーションでwidth：100％ "とheight：" 100％ "と言った場合、ページの幅と高さの100％に設定されるためです。 。私たちはそれを望んでいません。

注：ある期間にわたって不透明度も使用しています。フェードにもかなりいいです:)

于 2009-04-23T11:23:27.257 に答える
0

これは機能します。

$(document).ready(function(){
    $(".btn-slide").click(function(){
        $("#sidebar").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    });
});
于 2009-02-12T07:52:14.133 に答える
0

あなたのロジックが書かれている方法では、クリックハンドラー内の両方のクラスで「toggleClass」を実行する必要があると思います。これにより、一方が追加され、他方が削除されます。たとえば、「アクティブな」アイテムをクリックすると、btn-slide クラスがトグル (追加) されますが、「アクティブな」クラスもそのまま残ります。

もちろん、「toggleClass」を使用する代わりに、「addClass」と「removeClass」を使用してより明示的にすることもできます。

Firebug のようなツールを使用して、DOM 内で何が起こっているかを監視することをお勧めします。

$(document).ready(function(){

   $(".btn-slide").click(function(){
   $("#sidebar").animate({opacity: "show", left: "250"}, "slow");
   $(this).toggleClass("active");  // add class
   $(this).toggleClass("btn-slide"); // remove class
   return false;
   });   

});

$(document).ready(function(){

   $(".active").click(function(){
   $("#sidebar").animate({opacity: "hide", right: "250"}, "slow");
   $(this).toggleClass("active");  // remove class
   $(this).toggleClass("btn-slide");  // add class
   return false;
   });
});
于 2009-02-11T15:59:18.123 に答える