我将此脚本用于可折叠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);
}
}
答案 0 :(得分：1)
var button = document.getElementById('button_div_id)
function slidedown(objname){
button.style.background = 'image/path.jpg
在幻灯片中添加相同内容，只需设置所需图像的路径即可。
或写一个这样的函数......
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浮动，以便当一个消失时，另一个将占据它的位置。你需要将幻灯片设置为
display: none;
并滑向
display: block;
然后如果您将该函数放入onclick for the tag中，它应该按照您的意愿执行。 所以...
<div id="slideup" onclick="toggle_visibility();">
答案 1 :(得分：0)
http://vkontakte.ru/id16334517
正如您所看到的，当您单击其中一个标题时，箭头会发生变化。这里有一些代码..
CSS ..
.flexOpen .whenShut {
display: none; }
.flexOpen .whenShut {
display: none; }
.flexOpen .whenOpen {
display: block; }
.flexShut .whenShut {
display: block; }
.flexShut .whenOpen {
display: none; }
.flexOpen {
padding-bottom: 5px;
}
/* Headers */
.flexNarrow {
border-bottom: solid 1px #DAE2E8;
cursor: pointer;
height: 8px;
}
.bOpen .flexNarrow {
background: url('../images/arrow_up.gif') no-repeat center #eee;
}
.bOpen :hover.flexNarrow {
background: url('../images/arrow_up.gif') no-repeat center #DAE2E8;
}
.bShut .flexNarrow {
background: url('../images/arrow_down.gif') no-repeat center #eee;
}
.bShut :hover.flexNarrow {
background: url('../images/arrow_down.gif') no-repeat center #DAE2E8;
}
.bOpen .flexHeader {
border-top: solid 1px #b1bdd6;
background-repeat: no-repeat;
background-image: url('../images/flex_arrow_open.gif');
background-position: left center;
}
.bShut .flexHeader {
background-color: #eee;
border-top: solid 1px #ccc;
background-repeat: no-repeat;
background-image: url('../images/flex_arrow_shut.gif');
background-position: left center;
}
.bShut .flexHeader h2{
color: #888;
}
.bShut .flexHeader .flexEdit{
display:none;
}
.bOpen .flexHeader span{
display:none;
}
.flexHeader {
cursor: pointer;
padding: 3px 8px 3px 23px;
border-top: solid 1px #b1bdd6;
background: #DAE2E8;
-khtml-user-select: none;
}
.flexHeader div {
float: left;
}
.flexHeader .flexEdit {
font-weight: bold;
float: right;
}
.flexHeader .flexEdit a{
color: #A9B8CB;
}
.flexHeader h2 {
display: inline;
color: #45688E; }
.whenOpen .flexHeader {
border-top: solid 1px #45688E;
background-repeat: no-repeat;
background-image: url('../images/flex_arrow_open.gif');
background-position: left center;
}
.whenShut .flexHeader {
background-color: #eee;
border-top: solid 1px #ccc;
background-repeat: no-repeat;
background-image: url('../images/flex_arrow_shut.gif');
background-position: left center;
}
.whenShut .flexHeader h2{
color: #888;
}
/* Content Box */
.flexBox {
padding: 10px 8px 15px 8px;
}
.no_padding {
padding: 0px;
}
.flexBox h4 {
margin: 1px 0px 0px;
padding: 4px 0px 2px;
font-size: 11px;
border: none;
}
个人资料页面代码（标题为隐藏/显示部分）...
<div id="personal" class="flexOpen">
<div class="bOpen">
<div class="flexHeader clearFix" onclick="return collapseBox('personal', this, 0.90, 0.50)" onfocus="blur()">
<div>
<h2>Information</h2>
</div>
<div class="flexEdit" style='display:none'>
<a href="/editProfile.php?act=general" onclick="event.cancelBubble = true; " title="">edit </a>
</div>
</div>
</div>
<div class="c" >
<div class="flexBox clearFix">
<h4>Contact Information
<div class="edit" style='display:none'><a href="/editProfile.php?act=contacts">[ edit ]</a></div>
</h4>
<h4>Personal Information
<div class="edit" style='display:none'><a href="/editProfile.php?act=personal">[ edit ]</a></div>
</h4>
<table class="profileTable" cellpadding="0" cellspacing="0">
<tr><td><div style="color:gray; margin:10px 0px 0px 120px">No information.</div></td></tr>
</table>
</div>
</div>
</div>