滑动 DIV 代码 Javascript 的小问题

Question

我在

客户端站点上为简单的滑动div编写的一些代码有一点问题。

代码应该找到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 则相反

Answer 1

如果我

是你，我会将带有{height: 100px}或样式的类添加到容器"更多信息"中，并在 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;
}

希望对您有所帮助