使DIV向上显示onClick

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

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