Question

我有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;
 }

Answer 1

一种方法可能是将点击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>

Answer 2

这是使用jquery的解决方案。单击具有类.ratingsboxDIV的任何元素后，它将找到具有类.ratingclick的下一个同级并将其显示/隐藏。

我们可以使用.nextAll(".classname")找到被点击元素之后的所有同级元素，这使您可以在必要时在其他元素之间放置其他元素。如果我们在此之后加上.first()，则会阻止它切换具有该类的所有后续同级兄弟（您的代码建议它们可能不在单独的父元素中，尽管我会建议这样做）。

您可以将jquery行简化为$(this).next().toggle();，但它不会那么具体/通用。

$(".ratingclick").click( function() {

    $(this).nextAll(".ratingsboxDIV").first().toggle(); 

});

.ratingsboxDIV {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="feature">1 
    <div class="ratingclick">Ratings</div>
    <div class="ratingsboxDIV">This is Div 1</div>
</div>
 ----------  
<div class="feature">2 
    <div class="ratingclick">Ratings</div>
    <div class="ratingsboxDIV">This is Div 2 </div>
</div>
  ---------
<div class="feature">3
    <div class="ratingclick">Ratings</div>
    <div class="ratingsboxDIV">This is Div 3</div>
</div>

Answer 3

这是一个快速的jQuery解决方案。

$(function() {
  function ratingsBox(e) {
    e.preventDefault();
    var x = $(this);
    x.parent().next().toggleClass("hidden");
  }

  $(".ratingclick a").click(ratingsBox);
});

.ratingsboxDIV {
  min-height: 300px;
  background-color: white;
  padding: 10px;
  width: 80%;
  margin: auto;
  margin-top: 0px;
  max-width: 800px;
}

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="feature">1
  <div class="ratingclick"><a href="#">Ratings</a></div>
  <div class="ratingsboxDIV hidden">This is Div 1</div>
</div>
----------
<div class="feature">2
  <div class="ratingclick"><a href="#">Ratings</a></div>
  <div class="ratingsboxDIV hidden">This is Div 2</div>
</div>
---------
<div class="feature">3
  <div class="ratingclick"><a href="#">Ratings</a></div>
  <div class="ratingsboxDIV hidden">This is Div 3</div>
</div>

在发生Click事件时，我们阻止链接执行其默认操作。然后，我们可以使用.toggleClass()轻松添加或删除类。这使我们可以显示或隐藏下一个div。要选择下一个div，我们先使用.parent()，然后使用.next()。

希望有帮助。

Answer 4

尝试一下！

https://codepen.io/seunggabi/pen/aQxZZK

  function RatingsBox(no) {
    var list = document.getElementsByClassName("ratingsboxDIV");

  Array.prototype.forEach.call(list, function(item, index) {
    // because of toggle
    if(index+1 === no) {
      return;
    }
      item.style.display = "none";
    });

    var target = document.getElementById("ratingsboxDIV"+no);
    target.style.display = target.style.display === "block" ? "none" : "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 
<div class="ratingclick"><a onclick="RatingsBox(1)">Ratings</a></div>
<div id="ratingsboxDIV1" class="ratingsboxDIV"> This is Div 1 </div></div>
----------  
<div class="feature">2 
<div class="ratingclick"><a onclick="RatingsBox(2)">Ratings</a></div>
<div id="ratingsboxDIV2" class="ratingsboxDIV"> This is Div 2 </div></div>
---------
<div class="feature">3
<div class="ratingclick"><a onclick="RatingsBox(3)">Ratings</a></div>
<div id="ratingsboxDIV3" class="ratingsboxDIV"> This is Div 3 </div></div>

显示/隐藏唯一div

4 个答案: