javascript - onClick で DIV を上向きに表示する

Question

上向きの DIV を明らかにするためのトピックを見つけましたが、私は Javascript の専門家ではないので、ホバーではなくクリックでこれを機能させるにはどうすればよいでしょうか?

これが役立つ場合に備えて、前のトピックへのリンクは次のとおりです。jQueryを上向きにアニメーション化する方法

どんな助けでも大歓迎です。

Answer 1

サンプルデモはこちら

$("#slideToggle").click(function () {
   $('.slideTogglebox').slideToggle();
});

$("#reset").click(function(){
    location.reload();
});

HTML:

   <button id=slideToggle>slide</button>
    <br/>
    <div class="slideTogglebox">
         slideToggle()
    </div>

Answer 2

 $(document).ready(function() {
   var isClicked = false; //assuming its closed but its just logic
    $('.button').click(function() {
        if (isClicked) {
            isClicked = true;
            $(this).closest('div').animate({
            height: "150px",
        }, 400, "swing");
        }
        else
        {
            isClicked = false;
            $(this).closest('div').animate({
                height: "50px",
            }, 400, "swing");
        }
    });
 });

これはどう考えてもまずい方法です。代わりに CSS3 を使用してから、jQueries toggleClass を使用して jsut を使用することを検討する必要があります。

.toggleClass('animateUpwards)

ブラウザーがハードウェア機能を使用してすべてのものをアニメーション化できるようにし、JavaScript の優れたワンライナーも実現します。

Answer 3

jQuery slideUpを試すか、他の場所に投稿されているようにjQuery slideToggle - あるいは CSS3の例

またはあなたが投稿した質問から、おそらくこれがあなたの意図したものです：

http://jsbin.com/ogaje

div (の表示部分) をクリックする

$(document).ready(function() {
  $('.featureBox').toggle(function() {
    $(this).animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
    // or $(this).slideUp()
  },
  function() {
    $(this).animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
    // or $(this).slideDown()
  });
}); 

他の何かをクリックする

$(document).ready(function() {
  $("#button").toggle(function() {
    $("#someDiv").animate({top: '-390px', height:'540px'},{duration:'slow', queue:'no'});
    // or $("#someDiv").slideUp()
  },
  function() {
    $("#someDiv").animate({top: '0px', height:'150px'},{duration:'slow', queue:'no'});
    // or $("#someDiv").slideDown()
  });
});