js问题,鼠标点击显示div内容,再点击隐藏,两个div切换有中断。

发布网友 发布时间：2022-04-23 09:57

我来回答

共2个回答

热心网友 时间：2022-04-25 14:57

你是用一个变量"i"来保存两个"变换"的状态。。。当然会有问题。

你应该实现点击当前元素，则当前元素切换，另一个反切换，对吧？
如果是这样，也就是说function里面需要取到两类元素，一个是当前的，一个是除当前外的。
当前的你已经传进来，除当前外的就要看你如何处理了。
以下是步骤：
1.先建立一个“变换”与"详细显示"的Mapping.
2.function中需要通过当前元素的状态来决定如何显示.

结果如下:
var mapping = [
{‘变换':'menu20','详细显示':'con_menu_20','类型':'menu'},
{‘变换':'menu21','详细显示':'con_menu_21','类型':'menu'}
];
function find同类型非当前详细显示(当前变换,类型){
var resultArr = [];
for(var i=0;i<mapping.length;i++){
if(mapping[i].类型 == 类型 && mapping[i].变换 == 当前变换){
result.push(mappingp[i].详细显示);
}
}
return resultArr;
}
function find详细显示(变换){
for(var i=0;i<mapping.length;i++){
if(mapping[i].变换 == 变换){
return mapping[i].详细显示;
}
}
return null;
}
function get变换(name,cursel){
return name + cursel;
}
function get类型(name){
return name;
}
function change(name,cursel){
var 当前变换 = get变换(name,cursel);
var 当前详细显示 = find详细显示(变换);
var 同类非当前显示集合 = find同类型非当前详细显示(当前变换,get类型(name));
--处理当前
var menu=document.getElementById(当前详细显示);
menu.style.display=(menu.style.display=='none'?'':'none');
--处理非当前
for(var i=0;i<同类非当前显示集合.length;i++){
var noCurrentMenu = document.getElementById(同类非当前显示集合[i]);
noCurrentMenu.style.display=(noCurrentMenu.style.display=='none'?'':'none');
}
}

这儿有两个问题需要说明：
1,初始设定
2,mapping来源

初始设定要正确，你可以在html就设定好，也可以写一个init的function来初始化。建议用js初始化。
mapping来源一定是个全局变量，俨然看成单例集合，内容的来源请根据页面结构可通过js动态配置。追问回答的有点多。我其实是有很多的，几十个那么多。。。能给点详细写法吗

追答我敢打赌，你肯定没看完，看完了还会问“很多”这样的问题？

热心网友 时间：2022-04-25 16:15

var lastCursel = -1;
function change(name,cursel){
var menu=document.getElementById("con_"+name+"_"+cursel);
if (menu.style.display == "")
{
menu.style.display = "none";
}
else
{
menu.style.display = "";
}
if (lastCursel>=0 && lastCursel != cursel)
{
var lastmenu=document.getElementById("con_"+name+"_"+lastCursel);
lastmenu.style.display = "none";
}
lastCursel = cursel;
}