Javascript 关于可折叠div的帮助（为显示/隐藏状态添加图像）

我正在使用这个脚本进行可折叠div

一切正常，但我需要添加一个显示/隐藏状态的图像。当div显示时，标题显示“打开”箭头……当关闭时，标题显示“关闭”箭头。非常感谢您的帮助！！谢谢：）

这是JS

var timerlen = 5;
var slideAniLen = 250;

var timerID = new Array();
var startTime = new Array();
var obj = new Array();
var endHeight = new Array();
var moving = new Array();
var dir = new Array();

function slidedown(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display != "none")
                return; // cannot slide down something that is already visible

        moving[objname] = true;
        dir[objname] = "down";
        startslide(objname);
}

function slideup(objname){
        if(moving[objname])
                return;

        if(document.getElementById(objname).style.display == "none")
                return; // cannot slide up something that is already hidden

        moving[objname] = true;
        dir[objname] = "up";
        startslide(objname);
}

function startslide(objname){
        obj[objname] = document.getElementById(objname);

        endHeight[objname] = parseInt(obj[objname].style.height);
        startTime[objname] = (new Date()).getTime();

        if(dir[objname] == "down"){
                obj[objname].style.height = "1px";
        }

        obj[objname].style.display = "block";

        timerID[objname] = setInterval('slidetick(\'' + objname + '\');',timerlen);
}

function slidetick(objname){
        var elapsed = (new Date()).getTime() - startTime[objname];

        if (elapsed > slideAniLen)
                endSlide(objname)
        else {
                var d =Math.round(elapsed / slideAniLen * endHeight[objname]);
                if(dir[objname] == "up")
                        d = endHeight[objname] - d;

                obj[objname].style.height = d + "%";
        }

        return;
}

function endSlide(objname){
        clearInterval(timerID[objname]);

        if(dir[objname] == "up")
                obj[objname].style.display = "none";

        obj[objname].style.height = endHeight[objname] + "%";

        delete(moving[objname]);
        delete(timerID[objname]);
        delete(startTime[objname]);
        delete(endHeight[objname]);
        delete(obj[objname]);
        delete(dir[objname]);

        return;
}

function toggleSlide(objname){
  if(document.getElementById(objname).style.display == "none"){
    // div is hidden, so let's slide down
    slidedown(objname);
  }else{
    // div is not hidden, so slide up
    slideup(objname);
  }
}

把同样的东西放在你的幻灯片上，只需设置你想要的图片的路径

或者写一个这样的函数

function toggle_visibility() {
     var d = document.getElementById('slidedown');
     var u = document.getElementById('slideup');
     if(d.style.display == 'block') {
        d.style.display = 'none';
        u.style.display = 'block'
     }
     else {
        d.style.display = 'block';
        u.style.display = 'none';
     }
  }

让每个图像div浮动，这样当一个消失时，另一个将取代它。您需要将slideup设置为

display: none;

然后滑到

display: block;

然后，如果您将函数放入标记的onclick中，它应该做您希望它做的事情。 所以

您希望该图像是div的背景图像，还是只显示它？全局。。。。命名空间。。。凌乱的。。。。哎哟，我做了一些编辑，希望它更合理。谢谢你的回复。无法使其工作..此处查看此网站..例如，选择了一个随机配置文件..正如您在单击其中一个标题时所看到的，箭头会发生变化。

display: block;

<div id="slideup" onclick="toggle_visibility();">