在点击时显示Divs内容

Question

我不太确定如何用搜索引擎的术语表达我要寻找的内容，所以我想做的是：

我想在单击的页面中间分开一个或两个（如果需要的话）。 顶部向上滑动，底部向下滑动，并在中间显示网站内容。

---

---

---

我不太确定我该如何搜索能正确执行此操作的单词。 我见过一些对此有所变化的网站。 只有那些打开左/右。 我确信这很困难，但是对实现这一目标的任何帮助将不胜感激。

预先感谢，卑诗省。

Answer 1

如果您使用的是JQuery，则只需在目标div上使用slideUp和slideDown 。

编辑

实际上，在这种情况下，我认为您正在寻找slideToggle ：

<script type='text/javascript'>
    $(document).ready(function() {
        $(".button").click(function() {
            $("#content).slideToggle();
        });
    });
</script>

<div class='button'>Top Panel</div>
<div id='content'>Content</div>
<div>Bottom Panel</div>

Answer 2

我认为这就是您需要的： http : //jsfiddle.net/WQCav/

HTML：

<div id="hider1" style="position:absolute;background-color:black;width:100%;height:50%;" onclick="displayWebsite();" ></div>
<div id="hider2" style="background-color:black;width:100%;height:50%;position:absolute;top:50%;" onclick="displayWebsite();" ></div>
HI

JS：

var up,down;
function displayWebsite()
{
    if(typeof up!=="undefined")return;
    up=setInterval(goUp,20);
    down=setInterval(goDown,20);
}
function goUp(x)
{
    var h1=document.getElementById("hider1");
    if(h1.offsetHeight<=80)
    {
        clearInterval(up);
        return;
    }
    h1.style.height=parseInt(h1.style.height)-1+"%";
}
function goDown(x)
{
    var h2=document.getElementById("hider2");
    if(h2.offsetHeight<=80)
    {
        clearInterval(down);
        return;
    }
    h2.style.top=parseInt(h2.style.top)+1+"%";
    h2.style.height=parseInt(h2.style.height)-1+"%";
}

CSS：

html,body
{
    width:100%;
    height:100%;
}

Answer 3

我刚刚解决了这个问题。 我不希望div遍历其下的内容，而是将其下移。 这将使分割分裂成您想要的一半感觉-您将需要在滑动div之下的某些东西（例如另一个div，或者具有不可见高度的div和CSS中Auto的高度，以使其适合您的主要包装。

这是我所做的：

我的CSS：

.slide {
    height:200px;
    background-color: white;
    padding:20px;
    margin-top:10px;
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24);

}




#show_div {
    margin-left: 40px;
    text-decoration: none;
    background-color: white;
    color: black;
    padding: 5px 10px;
    border: 1px solid #333;
    font-size: 20px;


}

这是为了使其外观漂亮。 以下是更多功能：

.show_hide {
    display:none;

编码：在标头中，我放入了JQ函数：

 $(document).ready(function(){

        $(".slide").hide();
        $(".show").show();

    $('.show').click(function(){
    $(".slide").slideToggle();
    });

});

然后在div本身中，不要忘了放置一些实际的好东西，这些东西会为div设置样式以执行您喜欢的方式：

<a id="show_div" href="#" class="show">Browse Styles</a>


    <div class="slide">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum, nibh at iaculis ultrices, mi eros tincidunt enim, vitae vehicula lectus odio a ipsum. Aliquam erat volutpat. Fusce id nisl sit amet diam iaculis pulvinar. Sed ultrices ullamcorper ornare. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis mi arcu, porta ut elementum et, ullamcorper sed eros. In euismod tellus sed ipsum adipiscing suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac magna dui. Aenean nec leo libero. Pellentesque lacinia dolor a dui lacinia consectetur. Mauris euismod porta magna, non dignissim orci adipiscing malesuada. Phasellus nunc sapien, consectetur nec vestibulum ac, euismod a ipsum.

    </div>
​

主要的缺点是您需要为每个要使用的div放置一个Jscript实例，否则它们将同时激活。 您可以将按钮（或链接）放置在页面上的任何位置。 我有两个并排放置，单击它们会将页面从同一位置分开。

如果您需要多个，请不要忘记给div赋予唯一的ID，并在Jscript中更改其名称以使魔术发生。

这是一个JFIDDLE示例： http : //jsfiddle.net/vH3cK/1/

希望有帮助！

Answer 4

第一个“ div”应该由两个不同的div组成，一个用于顶部，另一个用于底部。 首先，页面内容的样式应为“ display：none”。 当用户单击第一个div时，使用“ $（selector）.slideDown（500）”显示页面内容。 必须进行测试，但我认为它应该像魅力一样工作。 您可以尝试使用.show（）、. toggle（）和不同的时间量（以毫秒为单位），以查看最合适的时间。

Answer 5

jQuery .animate（）函数也可能值得研究-它使用CSS，这通常是更好的做法。