我已经尝试了 slide/slidetoggle/的所有变体，但是当在 map 上单击 Kings Cross 时，我似乎无法显示详细信息面板
map HTML
<img src="https://imgur.com/p4z9t0T.png" id="Zone1TubeMap" alt="Zone 1
Tube Map" usemap="#Map" />
<map name="Map" id="Map">
<area id="KX" alt="Kings Cross St Pancras" title="" href="#"
shape="rect" coords="474,58,488,111"/>
<area alt="Baker Street" title="" href="#" shape="rect"
coords="221,94,252,124" />
<area alt="South Kensington" title="" href="#" shape="rect"
coords="131,359,146,384" />
<area alt="Oxford Circus" title="" href="#" shape="rect"
coords="287,208,303,225" />
<area alt="Embankment" title="" href="#" shape="rect"
coords="383,370,410,398" />
<area alt="London Bridge" title="" href="#" shape="rect"
coords="594,385,608,402" />
<area alt="Liverpool Street" title="" href="#" shape="rect"
coords="682,156,700,192" />
<area alt="Old Street" title="" href="#" shape="rect"
coords="593,104,613,124" />
<area alt="Leicester Square" title="" href="#" shape="rect"
coords="380,268,398,283" />
<area alt="Paddington" title="" href="#" shape="rect"
coords="47,91,89,145" />
</map>
面板 HTML
<div class="boxes">
<h1> Kings Cross St Pancras | Coffee Shop </h1>
<small> Details about the Coffee shop </small>
<img src="https://ats-alltopstartups.netdna-ssl.com//wp-
content/uploads/2016/12/How-to-Open-a-Coffee-Shop-.png" width="340px"
height="195px"> </div>
</div>
面板 CSS
.boxes {
background-color: white;
border: solid red 5px;
margin-bottom: 18px;
color: rgb(0,5,142);
opacity: 1;
}
最佳答案
从问题中不清楚你想要什么样的幻灯片，但下面的代码工作正常。您可以根据需要更改 .box div 的样式
<!DOCTYPE html>
<html>
<head>
<title> Narrabundah College Fashion Show </title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.boxes {
background-color: white;
border: solid red 5px;
margin-bottom: 18px;
color: rgb(0,5,142);
opacity: 1;
display: none;
}
</style>
<script>
$(document).ready(function(){
$("#KX").click(function(){
$('.boxes').slideToggle();
});
});
</script>
</head>
<body>
<!-- Media Video -->
<img src="https://imgur.com/p4z9t0T.png" id="Zone1TubeMap" alt="Zone 1
Tube Map" usemap="#Map" />
<map name="Map" id="Map">
<area id="KX" alt="Kings Cross St Pancras" title="" href="#"
shape="rect" coords="474,58,488,111"/>
<area alt="Baker Street" title="" href="#" shape="rect"
coords="221,94,252,124" />
<area alt="South Kensington" title="" href="#" shape="rect"
coords="131,359,146,384" />
<area alt="Oxford Circus" title="" href="#" shape="rect"
coords="287,208,303,225" />
<area alt="Embankment" title="" href="#" shape="rect"
coords="383,370,410,398" />
<area alt="London Bridge" title="" href="#" shape="rect"
coords="594,385,608,402" />
<area alt="Liverpool Street" title="" href="#" shape="rect"
coords="682,156,700,192" />
<area alt="Old Street" title="" href="#" shape="rect"
coords="593,104,613,124" />
<area alt="Leicester Square" title="" href="#" shape="rect"
coords="380,268,398,283" />
<area alt="Paddington" title="" href="#" shape="rect"
coords="47,91,89,145" />
</map>
<div class="boxes">
<h1> Kings Cross St Pancras | Coffee Shop </h1>
<small> Details about the Coffee shop </small>
<img src="https://ats-alltopstartups.netdna-ssl.com//wp-
content/uploads/2016/12/How-to-Open-a-Coffee-Shop-.png" width="340px"
height="195px">
</div>
</body>
</html>
关于javascript - JQuery onClick - 单击某个区域时面板是否从 map 下方滑出？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47178871/