Question

我发现了一个向上揭示DIV的主题，但由于我不是Javascript专家，我想知道如何才能使这个工作onClick而不是悬停？

如果这有帮助，上一主题的链接是：How to make jQuery animate upwards

感谢任何帮助。

Answer 1

以下是 demo

的示例

$("#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 Example

或者您发布的问题，也许这就是您的意思：

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

点击向上显示DIV

3 个答案: