制作一个折叠/展开的网页,使用js来实现。在html里定义好id,然后按id来折叠/展开,实现起来居然出幺蛾子。很简单的东西,找了很久找不出问题在哪里。展开是正确的,再折叠的时候先执行折叠函数后又执行一次展开函数,造成折叠不了。
js如下:
//j1.js
function gid( id ) { //get id
return document.getElementById( id );
}
function gcl( id ) { //get class
return document.getElementsByClassName( id );
}
function gtg( tag ) { //get tag
return document.getElementsByTagName( tag );
}
function show( seq ){ //展开折叠部分
alert(“in show”);
var el1 = gid( “ex” + seq );
var el2 = gid( “m” + seq );
el1.style.display=“block”;
el2.innerHTML = “<div class="showmore" id="m” + seq + “" onclick="hide(” + seq +“)">- Less examples”;
return;
};
function hide( seq ){ //收起折叠部分
alert(“in hide”);
var el1 = gid( “ex” + seq );
var el2 = gid( “m” + seq );
el1.style.display=“none”;
el2.innerHTML = “<div class="showmore" id="m” + seq + “" onclick="show(” + seq +“)">+ More examples”;
return;
};
function hides(){ //收起折叠部分
var cls = [‘ex’ ];
for ( var j=0; j< cls.length; j++) {
var els = gcl( cls[j] );
for ( var i=0; i<els.length; i++ ) {
els[i].style.display=“none”;
}
}
}
window.onload = function( ){
hides()
};
html如下(用书号替代了尖括号以便能够阅读):
《html》
《body》
《link rel=“stylesheet” type=“text/css” href=“cam-en-sp.css”》
《script type=‘text/javascript’ src=“j1.js”》《/script》
《div class=“showmore” id=“m1” onclick=“show(1)”》+ More examples《/div》
《div class=“ex” id=“ex1”》
《ul class=“hul-u hul-u0 ca_b daccord_b lm-0”》
《li 》She felt a persistent ache at the back of her head.《/li》
《/ul》
《/div》
《div class=“showmore” id=“m2” onclick=“show(2)”》+ More examples《/div》
《div class=“ex” id=“ex2”》
《ul class=“hul-u hul-u0 ca_b daccord_b lm-0”》
《li 》If you’re not used to exercise your joints may ache the next day.《/li》
《/ul》
《/div》
《/body》
《/html》
由于文件不能上传,无法以附件方式提供下载。
恳请大神指点一二。
js问题.rar (4.0 KB)
原文件见压缩包