在點擊時顯示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，這通常是更好的做法。