滑動DIV代碼的小問題Javascript

在我爲客戶端網站上的一個簡單滑動div編寫的代碼中存在一個小問題。滑動DIV代碼的小問題Javascript

代碼應該找到div的高度（因爲每頁的長度不同），然後將div設置爲100px的高度。目前的問題是，在javascript調整大小之前，div的全長可見半秒。任何人都可以幫助我修改我的代碼，以便div的全長對用戶不可見，而不點擊更多信息？

這裏是JS：

function heightGet(){ 
    var moreinfoHeight = document.getElementById("moreinfo").clientHeight; 
    var moreinfo = document.getElementById("moreinfo"); 
    moreinfo.style.height = moreinfoHeight + "px"; 
    moreinfo.style.visibility = "visible"; 
    document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");"; 
    document.getElementById("moreinfo_button").innerHTML="More Info"; 
    heightLess(moreinfoHeight); 
} 

function heightMore(val){ 
    var moreinfo = document.getElementById("moreinfo"); 

    document.getElementById("moreinfo_button").href="javascript:heightLess(" + val + ");"; 
    document.getElementById("moreinfo_button").innerHTML="Less Info"; 

    moreinfo.style.height = val + "px"; 
    alert(div.height); 
    /*setTimeout(function() { 
           // here add the code (or call a function) to be executed after pause 
          moreinfo.style.height = "100%"; 
          }, 500);*/ 
} 

function heightLess(val){ 
    var moreinfo = document.getElementById("moreinfo"); 

    document.getElementById("moreinfo_button").href="javascript:heightMore(" + val + ");"; 
    document.getElementById("moreinfo_button").innerHTML="More Info"; 

    moreinfo.style.height = "100px"; 

}

heightGet被觸發頁面加載，heightMore被觸發上按下一個按鈕更多的信息，和對面的heightLess

來源

2013-10-18 Joe

如果我是你，我會將類爲{height: 100px}或style的類添加到容器「moreinfo」中，並在heightMore函數中將其刪除，並添加heightLess函數。如果我理解你的話，你不必搜索容器的實際高度。

function heightGet(){ 
    document.getElementById("moreinfo_button").href="javascript:heightMore(" + moreinfoHeight + ");"; 
    document.getElementById("moreinfo_button").innerHTML="More Info"; 
} 

function heightMore(val){ 
    var moreinfo = document.getElementById("moreinfo"); 
    moreinfo.className = ''; 
} 

function heightLess(val){ 
    var moreinfo = document.getElementById("moreinfo"); 
    moreinfo.className = 'shortview'; 
}

，這裏是CSS部分

.shortview{ 
    height: 100px; 
}

希望它有助於

來源

2013-10-18 09:37:49 IgorCh

這樣做的問題是，'的document.getElementById（「moreinfo」）clientHeight;'將返回DIV高度作爲100px，除非我失去了一些東西？還在學習哈哈！ – Joe

你不再需要它了，如果你的moreinfo容器有類，讓它命名爲「shortview」，容器已經縮短了。我會更新我的答案，添加一些代碼 – IgorCh

完成！加了'height：105px; overflow：hidden;'到#container周圍.moreinfo，並添加'container.style.height =「auto」;'heightMore – Joe

滑動DIV代碼的小問題Javascript

回答

相關問題