javascript - 滑动 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} 或样式添加类到容器“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;
}

希望对你有帮助