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;
}

希望有所帮助

滑动DIV代码Javascript的小问题

1 个答案: