1
私は9つのドロップダウンボックスを持ちたいと思っていますが、現在は2つしかありません。問題はそれらのうちの1つだけがまだ働いているが、HTMLの異なる部分のIDの明らかな変更を除いて、両方のコードが同じであることです。 最初のボタン（「mid_side_button」）をクリックすると、完全に動作し、CSSを使用して作成されたコンテンツが表示されます。私は他のボタン（ "right_side_button"）をクリックすると、何もしません。Javascript：最初のドロップダウンボックスはまだ動作していません。コードは同じです
関連するセクションを含む関連するJavaScriptおよびHTML < div>要素があります。
CSSをあまり気にしないでください。詳細については、あくまで参考にしてください。
詳細情報が必要な場合は、ご返信ください。
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var rightdropdown = document.getElementById('right_side_dropdown_content');
var rightdropdownbuttontoggle = document.getElementById('right_side_button');
if (event.target !== rightdropdown) {
rightdropdown.style.display = 'none';
}
});
window.onload = function() {
"use strict";
var rightbutton = document.getElementById('right_side_button');
/* creating variable "midbutton" and calling the ID "mid_side_button" */
var rightdropdowncontent = document.getElementById('right_side_dropdown_content');
/* same as above */
document.onclick = function (e) { /* creating function "e" */
if (e.target === rightbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
rightdropdowncontent.style.display = 'block';
}
};
};
window.addEventListener('mouseup', function (event) { /* one of many approaches to open a dropdown */
"use strict";
var middropdown = document.getElementById('mid_side_dropdown_content');
var middropdownbuttontoggle = document.getElementById('mid_side_button');
if (event.target !== middropdown) {
middropdown.style.display = 'none';
}
});
window.onload = function() {
"use strict";
var midbutton = document.getElementById('mid_side_button');
/* creating variable "midbutton" and calling the ID "mid_side_button" */
var middropdowncontent = document.getElementById('mid_side_dropdown_content');
/* same as above */
document.onclick = function (e) { /* creating function "e" */
if (e.target === midbutton) {
/* if variable "midbutton" is clicked, display "middropdowncontent" */
middropdowncontent.style.display = 'block';
}
};
};.individual_left_side_links{
margin: 0px;
margin-right: 5px;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
display: block;
margin-bottom: 10px;
box-shadow: 2px 2px 2px #888;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
overflow: auto;
width: 300px;
}
#vehicle_3_header{
margin-left: 5px;
margin-right: 5px;
margin-top: 5px;
margin-bottom: 0px;
padding: 0px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
width: 300px;
float: right;
border-bottom: 2px solid black;
}
.compare_sections_titles{
margin-left: 10px;
margin-right: 10px;
margin-top: 5px;
margin-bottom: 0px;
}
#right_section{
margin-left: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 0px;
float: right;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
width: 300px;
margin-bottom: 10px;
box-shadow: 2px 2px 2px #888;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
overflow:auto;
}
#right_side_button{
background-color: aqua;
padding-right: 90px;
padding-left: 90px;
font-size: 16px;
border: 1px solid grey;
-moz-border-radius-topleft: 5px;
\t border-top-left-radius: 5px;
\t -moz-border-radius-topright: 5px;
\t border-top-right-radius: 5px;
box-shadow: 2px 2px 2px #888;
}
#right_side_dropdown_content{
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 40px;
text-align: left;
}
#right_side_dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#right_side_dropdown_content a:hover {
background-color: #f1f1f1;
}
#mid_section{
margin: 5px;
float: left;
width: 320px;
text-align: left;
padding-left: 10px;
padding-right: 10px;
background-image: -webkit-radial-gradient(left top, ellipse farthest-side, #8CFBFF 0%, #FFFFFF 100%);
box-shadow: 1px 1px 2px 2px #888;
}
#mid_side_button{
background-color: aqua;
padding-right: 90px;
padding-left: 90px;
font-size: 16px;
border: 1px solid grey;
-moz-border-radius-topleft: 5px;
\t border-top-left-radius: 5px;
\t -moz-border-radius-topright: 5px;
\t border-top-right-radius: 5px;
box-shadow: 2px 2px 2px #888;
}
#mid_side_dropdown_content{
display: none;
position:absolute;
background-color: #f9f9f9;
min-width: 220px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-left: 40px;
text-align: left;
}
#mid_side_dropdown_content a{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#mid_dropdown_text{
color: white;
text-align:center;
}
#mid_side_dropdown_content a:hover {
background-color: #f1f1f1
}<div id="mid_container">
<header id="container_top_padder">
<li><h2 id="individual_top_padder_text">Compare Vehicles</h2></li>
</header>
<article id="left_section">
<nav id="left_side_nav">
<li><a class="individual_left_side_links">Cars</a></li>
<li><a class="individual_left_side_links">Bikes</a></li>
<li><a class="individual_left_side_links">Trucks</a></li>
</nav>
</article>
<article id="mid_section">
<p>Title</p>
<p>Subtitle</p>
<p>Subtitle</p>
<p>Subtitle</p>
<button id="mid_side_button">Make</button>
<div id="mid_side_dropdown_content">
<p><a class="mid_dropdown_text" href="#">Link 1</a></p>
<p><a class="mid_dropdown_text" href="#">Link 2</a></p>
<p><a class="mid_dropdown_text" href="#">Link 3</a></p>
</div>
</article>
<header id="vehicle_3_header">
<h3 class="compare_sections_titles">Vehicle 3</h3>
</header>
<article id="right_section">
<button id="right_side_button">Make</button>
<div id="right_side_dropdown_content">
<p><a href="#">Link 1</a></p>
<p><a href="#">Link 2</a></p>
<p><a href="#">Link 3</a></p>
</div>
</article>
</div>
<script type="text/javascript" src="Test3Javascript.js"></script>
</body>
</html>
を確認してください、あなたはそれをテストしましたか？うまくいかないだろう。 – Hriju
はいそれは@Hrijuを働かせます –
ありがとう、みんな助けてくれてありがとう！申し訳ありませんが、コメントの上矢印を押すことはできません。新しいユーザーはこちらです。 – Dale