点击容器中的内容，然后将内容加载到Jquery中 [英] Push content in container down on click, load content into space revealed Jquery

问题描述

我有一个充满内容的容器。我试图点击一个按钮，并推动所有的内容向下，说700px。一旦内容被推下，一个新的页面加载到现在显示的空间中，因为内容被压下。我也想要推动相同的按钮来反向播放动画，在卸载新加载的内容时推送内容。

我如何使用jquery

按钮>

< div id =container>
< div id =topContentstyle =display：none;>
这是最热门的内容
< hr />
< / div>
< div id =topContentstyle =display：none;>
这是底部内容。
< / div>
< / div>

< script type =text / javascript>
$（function（）{
$（＃showHideTopContent）。click（toggleTopContent）;
}）;

function toggleTopContent（）{
var topContent = $（＃topContent）;
var bottomContent = $（＃bottomContent）;

if（！topContent.is（：hidden））{
topContent.hide（）;
bottomContent.slideUp（slow）;
} else {
//如果你想要内容来自AJAX或者在这里做
// ...
//如果你这样做了，那么topContent div应该保持在那里，但是空的。

$（＃topContent）。slideDown（slow）;
}
}
< / script>

I have a container full of content. Im trying to click a button, and push all the content downward, say 700px. Once the content is pushed down, a new page loads into the space that is now revealed because the content is pushed down. Im going to also want to push that same button to play the animation in reverse, push the content up while unloading the newly loaded content.

How would i do this with jquery?

解决方案

<button id="showHideTopContent">Show Hide Content</button>

<div id="container">
    <div id="topContent" style="display:none;">
        This is top content
        <hr />
    </div>
    <div id="topContent" style="display:none;">
        This is bottom content.
    </div>        
</div>

<script type="text/javascript">
    $(function() {
        $("#showHideTopContent").click(toggleTopContent);
    });

    function toggleTopContent() {
      var topContent = $("#topContent");
      var bottomContent = $("#bottomContent");

      if(!topContent.is(":hidden")) {
        topContent.hide();
        bottomContent.slideUp("slow");
      } else {
        // if you want the content to come from AJAX or so do it here
        //       ....
        //   If you do so, the topContent div should remain there, but empty.

        $("#topContent").slideDown("slow");
      }
    }
</script>

这篇关于点击容器中的内容，然后将内容加载到Jquery中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！