【发布时间】：2021-12-31 09:02:27
【问题描述】：
我是 jQuery 新手，对简单的逻辑感到困惑，需要您的帮助来整理混乱。我正在使用 HTML、CSS、jQuery 通过单击选择器“.class”上的 jQuery 事件来显示一些数据。 我第一次成功打开了单个 div 面板的数据。但是如果我两次使用相同的 HTML，那么两个面板会同时显示数据。下面是代码
jQuery(document).ready(function() {
jQuery(".flip").click(function () {
jQuery(this).siblings(".panel").slideToggle("slow");
});
});.panel, .flip {
padding: 30px;
text-align: center;
background-color: transparent;
font-weight: bold;
font-size: 28px;
}
.panel {
padding: 50px;
display: none;
}
.flip{
cursor:pointer;
}
.cards-header.flip {
background-color: #001c47;
color: #fff;
margin-bottom: 50px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- navigation end -->
<div class="heading-wrapper">
<h1>Ingredient of the Month</h1>
</div>
<div class="wrapper">
<div class="cards-header flip">
Year - 2022
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<div class="ingredient-month-wrapper">
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="#" title="Shea Butter" target="_blank"><img class="img-fluid" src="" alt="Shea Butter" /></a>
<div class="ingredient-month-wrapper">
<h2>January'22, Shea Butter</h2>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cards-header flip">
Year - 2021
</div>
<div class="panel ingredients-wrapper">
<div class="container">
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="https://example.com/highlights/ingredient-of-the-month/carrot-seed-oil.html" title="Carrot Seed Oil" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-carrot-seed-oil.jpg" alt="Carrot Seed Oil" /></a>
<div class="ingredient-month-wrapper">
<h2>December'21, Carrot Seed Oil</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/olive-oil.html" title="Olive Oil" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-olive-oil.jpg" alt="Olive Oil" /></a>
<div class="ingredient-month-wrapper">
<h2>November'21, Olive Oil</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/lemon.html" title="Lemon" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-lemon.jpg" alt="Lemon" /></a>
<div class="ingredient-month-wrapper">
<h2>October'21, Lemon</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/lycopene.html" title="Lycopene" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-lycopene.jpg" alt="Lycopene" /></a>
<div class="ingredient-month-wrapper">
<h2>September'21, Lycopene</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/peach.html" title="Peach" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-peach.jpg" alt="Peach" /></a>
<div class="ingredient-month-wrapper">
<h2>August'21, Peach</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/cucumber.html" title="Cucumber" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-cucumber.jpg" alt="Cucumber" /></a>
<div class="ingredient-month-wrapper">
<h2>July'21, Cucumber</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/avocado.html" title="Avocado" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-avocado.jpg" alt="Avocado" /></a>
<div class="ingredient-month-wrapper">
<h2>June'21, Avocado</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/watermelon.html" title="Watermelon" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-watermelon.jpg" alt="Watermelon" /></a>
<div class="ingredient-month-wrapper">
<h2>May'21, Watermelon</h2>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/coffee.html" title="Coffee" target="_blank" ><img class="img-fluid" src="./assets/img/Carousel-cofee.jpg" alt="Coffee" /></a>
<div class="ingredient-month-wrapper">
<h2>April'21, Coffee</h2>
</div>
</div>
</div>
<div class="col-6">
<div class="ingredient-img-wrapper">
<a href="ingredient-of-the-month/kakaduplum-completed.html" title="Kakadu Plum" target="_blank"><img class="img-fluid" src="./assets/img/Carousel-kakaduplum.jpg" alt="Kakadu Plum" /></a>
<div class="ingredient-month-wrapper">
<h2>March'21, Kakadu Plum</h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>所以我想一一打开，即当有人点击 2021 年时，它将打开其数据，如果有人点击 2022 年，则打开该年的 div 数据。 如何达到同样的效果？
【问题讨论】：
标签： javascript html jquery css css-selectors