我有 3 个主要 div(格式完全相同)。我想要做的是让“ratingclick”按钮在其各自的 div 下方显示 DIV 框。
例如评级按钮 1 打开其下方的唯一 Div。
HTML:
<div class="feature">1
<div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 1 </div></div>
----------
<div class="feature">2
<div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 2 </div></div>
---------
<div class="feature">3
<div class="ratingclick"><a onclick="RatingsBox()">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 3 </div></div>
Javascript:
function RatingsBox() {
var x = document.getElementById("ratingsboxDIV");
x.style.display === "none";
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#ratingsboxDIV {
display:none;
min-height:300px;
background-color:white;
padding: 10px;
width: 80%;
margin: auto;
margin-top: 0px;
max-width: 800px;
}
最佳答案
一种方法可能是提供点击event
进入RatingsBox
功能,以便您可以区分用户单击的按钮,然后切换相应 .ratingsboxDIV
的可见性元素:
function RatingsBox(event) {
var ratingsBox = event.currentTarget // Get the current button
.parentNode // Get parent of button
.parentNode // Get grandparent of button
.querySelector('.ratingsboxDIV'); // Get the ratings box
// Toggle visibility of the div via inline styles
if (ratingsBox.style.display !== "none") {
ratingsBox.style.display = "none";
} else {
ratingsBox.style.display = "block";
}
}
#ratingsboxDIV {
display:none;
min-height:300px;
background-color:white;
padding: 10px;
width: 80%;
margin: auto;
margin-top: 0px;
max-width: 800px;
}
<div class="feature">1
<!-- Pass event to RatingsBox -->
<div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 1 </div>
</div>
----------
<div class="feature">2
<!-- Pass event to RatingsBox -->
<div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 2 </div>
</div>
---------
<div class="feature">3
<!-- Pass event to RatingsBox -->
<div class="ratingclick"><a onclick="RatingsBox(event)">Ratings</a></div>
<div class="ratingsboxDIV"> This is Div 3 </div>
</div>
关于javascript - 显示/隐藏独特的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53602518/