我想创建一组div，如果我点击其中一个，其余的将使用jquery的slideToggle隐藏，但每次我点击一个div（第一次除外）它会多次上下滑动。这是我的代码：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="jquery-1.11.3.min.js"></script>
<script>
var cntln=0;
function generate(){
$.ajax({url: 'xmlsample.xml', async: false, success: function (d) {
$(d).find('linea').each(function () {
agregarlinea($(this).attr("nombre"));
});
}});
}
function agregarlinea(n) {
var ndiv = document.createElement('div');
ndiv.id = "dv"+cntln;
ndiv.style.height="100px";
ndiv.style.border="1px solid";
ndiv.onmouseover=function(){darken(event.target.id)};
ndiv.onmouseout=function(){lighten(event.target.id)};
document.getElementsByTagName('body')[0].appendChild(ndiv);
cntln++;
}
function darken(e) {
document.getElementById(e).style.backgroundColor="#D3D3D3";
document.body.style.cursor = "pointer";
var i;
$("#"+e).click(function(){
for (i=0; i<=cntln; i++) {
if (("dv"+i) != e){
$("#dv"+i).slideToggle("fast","swing");
}
}
});
}
function lighten(i) {
document.getElementById(i).style.backgroundColor="#FFFFFF";
document.body.style.cursor = "default";
}
</script>
</head>
<body id="bod" onload="generate()">
<h1 style="text-align:center">Dashboard</h1>
</body>
</html>
这是“xmlsample.xml”文件：
<dashboard>
<linea nombre="Allen1">
<maquina nombre="Clipper1" cantidad="50" planeado="100" producto="Chicharrones" turno="2" ooe="0" d="64.7" v="95.6" c="79"></maquina>
<maquina nombre="Clipper2" cantidad="60" planeado="100" producto="Chicharrones" turno="2" ooe="50" d="76.28" v="75.18" c="79.8"></maquina>
<maquina nombre="Extruder" cantidad="55" planeado="100" producto="Chicharrones" turno="2" ooe="51" d="70.56" v="56.08" c="36.62"></maquina>
<maquina nombre="Empacadora" cantidad="37" planeado="100" producto="Chicharrones" turno="2" ooe="81" d="19.84" v="36.16" c="48.16"></maquina>
<maquina nombre="Mesh" cantidad="40" planeado="100" producto="Chicharrones" turno="2" ooe="82" d="42.52" v="38.9" c="48.46"></maquina>
<maquina nombre="Filtro" cantidad="12" planeado="100" producto="Chicharrones" turno="2" ooe="100" d="23.98" v="80.14" c="57.2"></maquina>
<paro tipo="fallo mecanico" numero="5"></paro>
<paro tipo="temperatura" numero="7"></paro>
<paro tipo="emergencia medica" numero="2"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
<paro tipo="Almuerzo" numero="16"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
</linea>
<linea nombre="Allen2">
<maquina nombre="Clipper1" cantidad="50" planeado="100" producto="Chicharrones" turno="2" ooe="0" d="64.7" v="95.6" c="79"></maquina>
<maquina nombre="Clipper2" cantidad="60" planeado="100" producto="Chicharrones" turno="2" ooe="50" d="76.28" v="75.18" c="79.8"></maquina>
<maquina nombre="Extruder" cantidad="55" planeado="100" producto="Chicharrones" turno="2" ooe="51" d="70.56" v="56.08" c="36.62"></maquina>
<maquina nombre="Empacadora" cantidad="37" planeado="100" producto="Chicharrones" turno="2" ooe="81" d="19.84" v="36.16" c="48.16"></maquina>
<maquina nombre="Mesh" cantidad="40" planeado="100" producto="Chicharrones" turno="2" ooe="82" d="42.52" v="38.9" c="48.46"></maquina>
<maquina nombre="Filtro" cantidad="12" planeado="100" producto="Chicharrones" turno="2" ooe="100" d="23.98" v="80.14" c="57.2"></maquina>
<paro tipo="fallo mecanico" numero="5"></paro>
<paro tipo="temperatura" numero="7"></paro>
<paro tipo="emergencia medica" numero="2"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
<paro tipo="Almuerzo" numero="16"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
</linea>
<linea nombre="buhler1">
<maquina nombre="Clipper1" cantidad="50" planeado="100" producto="Chicharrones" turno="2" ooe="0" d="64.7" v="95.6" c="79"></maquina>
<maquina nombre="Clipper2" cantidad="60" planeado="100" producto="Chicharrones" turno="2" ooe="50" d="76.28" v="75.18" c="79.8"></maquina>
<maquina nombre="Extruder" cantidad="55" planeado="100" producto="Chicharrones" turno="2" ooe="51" d="70.56" v="56.08" c="36.62"></maquina>
<maquina nombre="Empacadora" cantidad="37" planeado="100" producto="Chicharrones" turno="2" ooe="81" d="19.84" v="36.16" c="48.16"></maquina>
<maquina nombre="Mesh" cantidad="40" planeado="100" producto="Chicharrones" turno="2" ooe="82" d="42.52" v="38.9" c="48.46"></maquina>
<maquina nombre="Filtro" cantidad="12" planeado="100" producto="Chicharrones" turno="2" ooe="100" d="23.98" v="80.14" c="57.2"></maquina>
<paro tipo="fallo mecanico" numero="5"></paro>
<paro tipo="temperatura" numero="7"></paro>
<paro tipo="emergencia medica" numero="2"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
<paro tipo="Almuerzo" numero="16"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
</linea>
<linea nombre="buhler2">
<maquina nombre="Clipper1" cantidad="50" planeado="100" producto="Chicharrones" turno="2" ooe="0" d="64.7" v="95.6" c="79"></maquina>
<maquina nombre="Clipper2" cantidad="60" planeado="100" producto="Chicharrones" turno="2" ooe="50" d="76.28" v="75.18" c="79.8"></maquina>
<maquina nombre="Extruder" cantidad="55" planeado="100" producto="Chicharrones" turno="2" ooe="51" d="70.56" v="56.08" c="36.62"></maquina>
<maquina nombre="Empacadora" cantidad="37" planeado="100" producto="Chicharrones" turno="2" ooe="81" d="19.84" v="36.16" c="48.16"></maquina>
<maquina nombre="Mesh" cantidad="40" planeado="100" producto="Chicharrones" turno="2" ooe="82" d="42.52" v="38.9" c="48.46"></maquina>
<maquina nombre="Filtro" cantidad="12" planeado="100" producto="Chicharrones" turno="2" ooe="100" d="23.98" v="80.14" c="57.2"></maquina>
<paro tipo="fallo mecanico" numero="5"></paro>
<paro tipo="temperatura" numero="7"></paro>
<paro tipo="emergencia medica" numero="2"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
<paro tipo="Almuerzo" numero="16"></paro>
<paro tipo="cambio de bobina" numero="1"></paro>
</linea>
</dashboard>
答案 0 :(得分：0)
您正在绑定darken()函数中的单击处理程序，因此它会反复绑定。您应该在agregarlinea()函数中绑定click处理程序。
function agregarlinea(n) {
var ndiv = document.createElement('div');
ndiv.id = "dv" + cntln;
ndiv.style.height = "100px";
ndiv.style.border = "1px solid";
ndiv.onmouseover = function () {
darken(event.target.id)
};
ndiv.onmouseout = function () {
lighten(event.target.id)
};
$(ndiv).click(function () {
var thisId = $(this).attr('id');
for (var i = 0; i <= cntln; i++) {
if (("dv" + i) != thisId) {
$("#dv" + i).slideToggle("fast", "swing");
}
}
});
document.getElementsByTagName('body')[0].appendChild(ndiv);
cntln++;
}
function darken(e) {
document.getElementById(e).style.backgroundColor = "#D3D3D3";
document.body.style.cursor = "pointer";
}