我正试图为练习创建一个菜单，其中包含不同类别的饭菜。（即早餐、午餐、小吃等）我将这个菜单设置为有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">&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;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 class = "section section-menu">
        <div class = "option">
            <div class = "option-container">
                <img src = "img/Breakfast-Figma.png" alt="Breakfeast img">
                <h3 class = "option-text">&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;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">&nbsp;&nbsp;&nbsp;&nbsp;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>

还没有JS，因为我的尝试没有产生明显的结果。

顺晟科技：

元素不需要具有不同的类名，但是您可以根据需要使用其他类名，并在引用具有指定类的元素时根据需要使用特定的类名。

我建议在javascript使用中引用distinct元素选择属性。然后使用在每个元素上放置a。您可以在JavaScript中使用或在以下循环中应用事件侦听器。

注意：尽管有类似array的方法，但它实际上是htmlcollection