JQuery onClick - エリアがクリックされたときに地図の下から右にスライドしますか？

私はスライド/ slidetoggleのすべてのバリエーションを試してみた/私はキングスクロスがJQuery onClick - エリアがクリックされたときに地図の下から右にスライドしますか？

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>

PANELの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; 
}

出典

2017-11-08 RinseUseBang

を望むように、あなたは、■はdiv要素のスタイルを変更することができます - https://jsfiddle.net/mghe4kcb/あなたはjQueryのを含めると、タイプミスHTTPSを修正したら – RinseUseBang

デモが正常に動作します：// jsfiddle .net/nj3h65Ld/ – charlietfl

そのあなたはどのような種類のスライドを望んでいるのかという質問からは明らかではありませんが、次のコードはうまくいきます。あなたは、テストエリアを作ら

<!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>

出典

2017-11-08 12:03:48

私のコード内の何かがブロックされていると思います。それを私のウェブページ上の外部/ javacriptファイルに追加すると 'Map.html：12 Uncaught ReferenceError：$は定義されていません。 Map .html：12 ' – RinseUseBang

HTMLにjqueryファイルを含めてください。 –

JQuery onClick - エリアがクリックされたときに地図の下から右にスライドしますか？

答えて

関連する問題