好的，所以这对我来说是新的。我使用 Javascript 多年，从未遇到过这个问题，但话又说回来，我以前从未在一个页面上使用过这么多(几乎没有)。
我正在为我的公司创建一个分销商 map ，这样公司就可以点击其任何一家公司，然后会弹出显示其位置的标记。那工作正常。但是，当您单击标记时，它应该会为您提供更详细的信息(公司名称和位置)。那工作正常。对于标记和文本，我都使用 javascript 来切换显示/隐藏。然而，在我添加了大约 10 个标记之后，我注意到一些标记停止工作了——尽管我在制作每个标记后都进行了测试，并且自测试以来没有改变任何东西。我添加的越多，它似乎变得越不稳定。 javascript 是否有内存限制或其他限制(我到底是如何最大限度地利用它的？我知道这可能是无稽之谈 - 我完全迷失了 atm)。
其他奇怪的事情 - 相同的标记在所有浏览器中停止工作。为了弥补任何意外更改，我将代码从一个有效的标记复制并粘贴到一个无效的标记，然后只更改值。之前工作的那个仍然工作，之前坏掉的那个仍然不工作。我正在粘贴下面的代码。任何帮助将不胜感激。
PS - 我删除了大部分空白标记(大约 18 个)。如果此代码没有为您重现问题，您可以将它们添加回去。
编辑:PPS - 这不是相互覆盖的元素 - 有时不起作用的标记本身位于岛屿上，附近没有其他东西。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Distributor Map for X</title>
<link rel="stylesheet" type="text/css" href="distributor.css">
<script src="jquery.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="company1_check"){
$(".company1").toggle();
}
if($(this).attr("value")=="company2_check"){
$(".company2").toggle();
}
if($(this).attr("value")=="company3_check"){
$(".company3").toggle();
}
if($(this).attr("value")=="company4_check"){
$(".company4").toggle();
}
if($(this).attr("value")=="company5_check"){
$(".company5").toggle();
}
});
});
</script>
</head>
<body>
<div id="containerdiv" style="width:1200px; margin-left:auto; margin-right:auto;">
<div id="header">
<h1 style="text-align:center;">
Distributor Map
</h1>
<h2 style="text-align:center;">
For X
</h2>
<p style="font-weight:bold; text-align:center;">
Select the map(s) for the company whose distributors you wish to see.
</p>
<p style="text-align:center;">
<span style="font-weight:bold;">company1:<input value="company1_check" type="checkbox">
<span style="font-weight:bold;">company2:<input value="company2_check" type="checkbox" onclick="toggle_visibility(company2_map)">
<span style="font-weight:bold;">company3:<input value="company3_check" type="checkbox" onclick="toggle_visibility(company3_map)">
<span style="font-weight:bold;">company4:<input value="company4_check" type="checkbox" onclick="toggle_visibility(company4_map)">
<span style="font-weight:bold;">company5:<input value="company5_check" type="checkbox" onclick="toggle_visibility(company5)">
</p>
</div>
<div id="map" class="maps" style="width:1200px; z-index:1;">
<img src="images/base_map.png" alt="map" />
</div>
<!--Begin company1 Distributors-->
<div class="company1" style="z-index:6; display:none;">
<div class="company1" style="z-index:11; display:none; margin-left:870px; margin-top:190px;">
<a onclick="$('.company1_china_info').toggle()" href="#" id="company1_ch"><img id="company1_china" src="images/company1/company1_aus.png" alt="Beijing" ></a>
<p class="company1_china_info" style="color:#000; width:auto; display:none; margin-top:-90px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Beijing SCR Instruments LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in China</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:865px; margin-top:235px;">
<a onclick="$('.company1_hongkong_info').toggle()" href="#" id="company1_hongkong"><img id="company1_hongkong" src="images/company1/company1_aus.png" alt="Hong Kong" ></a>
<p class="company1_hongkong_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Fugro Geotechnical Services LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in Hong Kong</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:562px; margin-top:162px;">
<a onclick="$('.company1_italy_info').toggle()" href="#" id="company1_italy"><img id="company1_italy"src="images/company1/company1_aus.png" alt="Italy" ></a>
<p class="company1_italy_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:30px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;"> Belotti Sistemi S.a.s.</span><br />
<span style="background-color:#fff;">company1 Distributor in Italy</span>
</p>
</div>
<div class="company1" style="z-index:12; display:none; margin-left:824px; margin-top:265px;">
<a onclick="$('.company1_malaysia_info').toggle()" href="#" id="company1_malaysia"><img id="company1_malaysia" src="images/company1/company1_aus.png" alt="Malaysia" ></a>
<p class="company1_malaysia_info" style="color:#000; width:auto; display:none; margin-top:-60px; margin-left:-250px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CE Instruments SDN. BHD.</span><br />
<span style="background-color:#fff;">company1 Distributor in Malaysia</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:834px; margin-top:290px;">
<a onclick="$('.company1_singapore_info').toggle()" href="#" id="company1_sing"><img id="company1_singapore"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_singapore_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:-150px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CEP Services PTE LTD / Fugru Singapore PTE LTD</span><br />
<span style="background-color:#fff;">company1 Distributors in Brunei (CEP) and Singapore (Fugro) </span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:310px; margin-top:355px;">
<a onclick="$('.company1_peru_info').toggle()" href="#" id="company1_peru"><img id="company1_peru"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_peru_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Corporacion Geotecnica Peru EIRL</span><br />
<span style="background-color:#fff;">company1 Distributor in Peru</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:510px; margin-top:172px;">
<a onclick="$('.company1_spain_info').toggle()" href="#" id="company1_spain"><img id="company1_spain"src="images/company1/company1_aus.png" alt="Spain" ></a>
<p class="company1_spain_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Distribuciones Pako</span><br />
<span style="background-color:#fff;">company1 Distributor in Spain</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:905px; margin-top:190px;">
<a onclick="$('.company1_sk_info').toggle()" href="#" id="company1_sk"><img id="company1_southkorea" src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_sk_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Dong-A Geovan Co., Ltd</span><br />
<span style="background-color:#fff;">company1 Distributor in South Korea</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:890px; margin-top:250px;">
<a onclick="$('.company1_philippines_info').toggle()" href="#" id="company1_phil"><img id="company1_philippines"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_philippines_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Drilling Advisory & Logistics</span><br />
<span style="background-color:#fff;">company1 Distributor in The Philippines</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:260px; margin-top:250px;">
<a onclick="$('.company1_mexico_info').toggle()" href="#" id="company1_mex"><img id="company1_mexico"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_mexico_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Enlace Tecnico</span><br />
<span style="background-color:#fff;">company1 Distributor in Mexico</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:535px; margin-top:135px;">
<a onclick="$('.company1_uk_info').toggle()" href="#" id="company1_uk"><img id="company1_uk"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_uk_info" style="color:#000; width:auto; display:none; margin-top:-80px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Gage Technique International</span><br />
<span style="background-color:#fff;">company1 Distributor in the United Kingdom</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:330px; margin-top:175px;">
<a onclick="$('.company1_canada_info').toggle()" href="#" id="company1_can"><img id="company1_canada"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_canada_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Geneq Inc.</span><br />
<span style="background-color:#fff;">company1 Distributor in Canada</span>
</p>
</div>
<div class="company1" style="z-index:11; display:none; margin-left:540px; margin-top:172px;">
<a onclick="$('.company1_barca_info').toggle()" href="#" id="company1_barca"><img id="company1_barca"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_barca_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">GeoMed Projectes, S.L.</span><br />
<span style="background-color:#fff;">company1 Distributor in Barcelona, Spain</span>
</p>
</div>
</div>
<!--Begin company2 Distributors-->
<div class="company2" style="z-index:5; display:none;">
<div class="company2" style="z-index:5; display:none; margin-left:570px; margin-top:210px;">
<a onclick="$('.company2_random_info').toggle()" href="#" id="company1_ch"><img id="company2_test"src="images/company2/company2_marker.png" alt="Somewhere" ></a>
<p class="company2_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company2 Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
<!--Begin company 3 Distributors-->
<div class="company3" style="z-index:4; display:none;">
<div class="company3" style="z-index:4; display:none; margin-left:270px; margin-top:260px;">
<a onclick="$('.company3_random_info').toggle()" href="#" id="company1_ch"><img id="company3_test" src="images/company3/company3_marker.png" alt="Somewhere" ></a>
<p class="company3_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company3 Instruments Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
<!--Begin company4 Distributors-->
<div class="company4" style="z-index:3; display:none;">
<div class="company4" style="z-index:3; display:none; margin-left:270px; margin-top:160px;">
<a onclick="$('.company4_random_info').toggle()" href="#" id="company1_ch"><img id="company4_test" src="images/company4/company4_marker.png" alt="Somewhere" ></a>
<p class="company4_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company4 Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
<!--Begin company5 Distributors-->
<div class="company5" style="z-index:2; display:none;">
<div class="company5" style="z-index:2; display:none; margin-left:870px; margin-top:90px;">
<a onclick="$('.company5_random_info').toggle()" href="#" id="company1_ch"><img id="company5_test" src="images/company5/company5_marker.png" alt="Somewhere" ></a>
<p class="company5_random_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Random Distributor</span><br />
<span style="background-color:#fff;">company5 Distributor in Someplace, Somewhere</span>
</p>
</div>
</div>
</div>
</body>
</html>
编辑:链接的 CSS 页面
div.maps {position:absolute; top:300;}
div.company1 {position:absolute;top:300;width:100%;}
img.company1_aus {position:absolute;top:400;left:750;}
p.company1_china_info {position:absolute;top:200;left:870;}
div.company2 {position:absolute; top:300; width:100%;}
p.company2_random_info {position:absolute; top:200; left:570;}
div.company3 {position:absolute; top:300; width:100%;}
div.company4 {position:absolute; top:300; width:100%;}
div.company5 {position:absolute; top:300; width:100%;}
最佳答案
将内部 div 的类更改为其他类:
<div class="company1" style="z-index:6; display:none;">
<div class="company1-1" style="z-index:11; display:none; margin-left:870px; margin-top:190px;">
<a onclick="$('.company1_china_info').toggle()" href="#" id="company1_ch"><img id="company1_china" src="images/company1/company1_aus.png" alt="Beijing" ></a>
<p class="company1_china_info" style="color:#000; width:auto; display:none; margin-top:-90px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Beijing SCR Instruments LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in China</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:865px; margin-top:235px;">
<a onclick="$('.company1_hongkong_info').toggle()" href="#" id="company1_hongkong"><img id="company1_hongkong" src="images/company1/company1_aus.png" alt="Hong Kong" ></a>
<p class="company1_hongkong_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Fugro Geotechnical Services LTD</span><br />
<span style="background-color:#fff;">company1 Distributor in Hong Kong</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:562px; margin-top:162px;">
<a onclick="$('.company1_italy_info').toggle()" href="#" id="company1_italy"><img id="company1_italy"src="images/company1/company1_aus.png" alt="Italy" ></a>
<p class="company1_italy_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:30px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;"> Belotti Sistemi S.a.s.</span><br />
<span style="background-color:#fff;">company1 Distributor in Italy</span>
</p>
</div>
<div class="company1-1" style="z-index:12; display:none; margin-left:824px; margin-top:265px;">
<a onclick="$('.company1_malaysia_info').toggle()" href="#" id="company1_malaysia"><img id="company1_malaysia" src="images/company1/company1_aus.png" alt="Malaysia" ></a>
<p class="company1_malaysia_info" style="color:#000; width:auto; display:none; margin-top:-60px; margin-left:-250px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CE Instruments SDN. BHD.</span><br />
<span style="background-color:#fff;">company1 Distributor in Malaysia</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:834px; margin-top:290px;">
<a onclick="$('.company1_singapore_info').toggle()" href="#" id="company1_sing"><img id="company1_singapore"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_singapore_info" style="color:#000; width:auto; display:none; margin-top:-10px; margin-left:-150px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">CEP Services PTE LTD / Fugru Singapore PTE LTD</span><br />
<span style="background-color:#fff;">company1 Distributors in Brunei (CEP) and Singapore (Fugro) </span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:310px; margin-top:355px;">
<a onclick="$('.company1_peru_info').toggle()" href="#" id="company1_peru"><img id="company1_peru"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_peru_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Corporacion Geotecnica Peru EIRL</span><br />
<span style="background-color:#fff;">company1 Distributor in Peru</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:510px; margin-top:172px;">
<a onclick="$('.company1_spain_info').toggle()" href="#" id="company1_spain"><img id="company1_spain"src="images/company1/company1_aus.png" alt="Spain" ></a>
<p class="company1_spain_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Distribuciones Pako</span><br />
<span style="background-color:#fff;">company1 Distributor in Spain</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:905px; margin-top:190px;">
<a onclick="$('.company1_sk_info').toggle()" href="#" id="company1_sk"><img id="company1_southkorea" src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_sk_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Dong-A Geovan Co., Ltd</span><br />
<span style="background-color:#fff;">company1 Distributor in South Korea</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:890px; margin-top:250px;">
<a onclick="$('.company1_philippines_info').toggle()" href="#" id="company1_phil"><img id="company1_philippines"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_philippines_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Drilling Advisory & Logistics</span><br />
<span style="background-color:#fff;">company1 Distributor in The Philippines</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:260px; margin-top:250px;">
<a onclick="$('.company1_mexico_info').toggle()" href="#" id="company1_mex"><img id="company1_mexico"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_mexico_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Enlace Tecnico</span><br />
<span style="background-color:#fff;">company1 Distributor in Mexico</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:535px; margin-top:135px;">
<a onclick="$('.company1_uk_info').toggle()" href="#" id="company1_uk"><img id="company1_uk"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_uk_info" style="color:#000; width:auto; display:none; margin-top:-80px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Gage Technique International</span><br />
<span style="background-color:#fff;">company1 Distributor in the United Kingdom</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:330px; margin-top:175px;">
<a onclick="$('.company1_canada_info').toggle()" href="#" id="company1_can"><img id="company1_canada"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_canada_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">Geneq Inc.</span><br />
<span style="background-color:#fff;">company1 Distributor in Canada</span>
</p>
</div>
<div class="company1-1" style="z-index:11; display:none; margin-left:540px; margin-top:172px;">
<a onclick="$('.company1_barca_info').toggle()" href="#" id="company1_barca"><img id="company1_barca"src="images/company1/company1_aus.png" alt="" ></a>
<p class="company1_barca_info" style="color:#000; width:auto; display:none; margin-top:-10px; font-size:18px; font-weight:bold;">
<span style="text-decoration:underline; background-color:#fff;">GeoMed Projectes, S.L.</span><br />
<span style="background-color:#fff;">company1 Distributor in Barcelona, Spain</span>
</p>
</div>
</div>
将此添加到您的 css 文件中:
div.company1-1 {position:absolute;}
Javascript:
if($(this).attr("value")=="company1_check"){
$(".company1").toggle();
$(".company1-1").toggle();
}
您还应该关闭 span 标签并摆脱 onclick toggle_visibility()，如下所示:
<span style="font-weight:bold;">company1:<input value="company1_check" type="checkbox"> </span>
<span style="font-weight:bold;">company2:<input value="company2_check" type="checkbox"> </span>
<span style="font-weight:bold;">company3:<input value="company3_check" type="checkbox"> </span>
<span style="font-weight:bold;">company4:<input value="company4_check" type="checkbox"> </span>
<span style="font-weight:bold;">company5:<input value="company5_check" type="checkbox"> </span>
关于Javascript 和/或点击因过度拥挤而变得不稳定？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28092888/