我正在尝试创建一个菜单练习，其中包含不同类别的膳食。(即早餐，午餐，零食等)我做这个菜单，其中有8行，当一个他们被点击，它显示了一个以前隐藏的描述关于该特定项目。我在实现显示菜单描述背后的JS时遇到了麻烦。我不确定是否所有行都需要具有唯一的类名，但我不确定如何在单击时选择一行，然后仅为该特定行生成输出。这是我目前的代码(注:描述还没有创建)此外，我是新的web开发，所以任何会指出我在正确的方向，即使它不是一个完整的答案将是有帮助的:)
HTML
<section class = "section section-menu">
<div class = "option">
<div class = "option-container">
<img src = "img/Breakfast-Figma.png" alt="Breakfeast img">
<h3 class = "option-text"> Breakfeast</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/CFA-Spicy-Chicken-Entree-Figma.png" alt="Spicy Chicken img">
<h3 class = "option-text"> Entreés</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Salad-Figma.png" alt="Salad img">
<h3 class = "option-text"> Salads</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Large-Fries-Sides-Figma.png" alt="Fries img">
<h3 class = "option-text"> Sides</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Kids-Meal-Figma.png" alt="Kids Meal img">
<h3 class = "option-text"> Kid's Meals</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Milkshake-Treat-Figma.png" alt="Milkshake img">
<h3 class = "option-text"> Treats</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/Beverage-Figma.png" alt="Beverage img">
<h3 class = "option-text"> Drinks</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
<div class = "option">
<div class = "option-container">
<img src = "img/CFA-Dipping-Sauce-Figma.png" alt="Dipping Sauce img">
<h3 class = "option-text"> Dipping Sauces & Dressings</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class = "dropdown-arrow"></ion-icon>
</div>
</section>
<script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
CSS
.section-menu {
margin-top: 5%;
}
.option {
width: 75%;
margin: 0 auto;
display: flex;
}
.option-container {
width: max-content;
display: flex;
}
.option-text {
float: right;
margin: auto;
font-family: Apercu-light;
}
.dropdown-arrow {
height: 60px;
font-size: 22px;
float: right;
margin: auto;
margin-right: 5%;
}
没有JS，因为我的尝试没有产生明显的结果。
元素不需要有不同的类名，但您可以根据需要使用额外的类名，并且在引用具有指定类(es)的元素时尽可能具体。
我建议使用id属性来选择不同的元素，以便在javascript中使用getElementById来引用它们。然后使用addEventListener在每个<div class="option">元素上放置clickeventListener。您可以在JavaScript中使用getElementsByClassName或querySelectorAll选择它们，然后在forEach循环中应用事件侦听器，如下所示。
注意:虽然options有一个forEach方法像一个数组，它实际上是一个HTMLCollection
const options = document.querySelectorAll(".option");
options.forEach(function(option) {
option.addEventListener("click", function(event) {
var element = event.target;
if (element.tagName === "IMG") {console.log(element.src);return;}
console.log(event.target.textContent.trim());
});
});<section class="section section-menu">
<div class="option">
<div class="option-container">
<img src="img/Breakfast-Figma.png" alt="Breakfeast img">
<h3 class="option-text"> Breakfeast</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/CFA-Spicy-Chicken-Entree-Figma.png" alt="Spicy Chicken img">
<h3 class="option-text"> Entreés</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Salad-Figma.png" alt="Salad img">
<h3 class="option-text"> Salads</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Large-Fries-Sides-Figma.png" alt="Fries img">
<h3 class="option-text"> Sides</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Kids-Meal-Figma.png" alt="Kids Meal img">
<h3 class="option-text"> Kid's Meals</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Milkshake-Treat-Figma.png" alt="Milkshake img">
<h3 class="option-text"> Treats</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/Beverage-Figma.png" alt="Beverage img">
<h3 class="option-text"> Drinks</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
<div class="option">
<div class="option-container">
<img src="img/CFA-Dipping-Sauce-Figma.png" alt="Dipping Sauce img">
<h3 class="option-text"> Dipping Sauces & Dressings</h3>
</div>
<ion-icon name="chevron-up-circle-outline" class="dropdown-arrow"></ion-icon>
</div>
</section>