0

我为客户网站上的简单滑动 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 则相反

4

1 回答 1

0

如果我是你，我会{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;
}

希望能帮助到你

于 2013-10-18T09:37:49.103 回答