javascript - 使 DIV 向上显示 onClick

Question

我找到了一个向上显示 DIV 的主题，但由于我不是 Javascript 专家，我想知道如何使这项工作在点击而不是悬停上工作？

以防万一，上一个主题的链接是：How to make jQuery animate up up

任何帮助表示赞赏。

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

.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()
  });
});