只显示一个 div.panel，而不是两个
Posted
技术标签:
【中文标题】只显示一个 div.panel，而不是两个【英文标题】：Show just one div.panel, not both 【发布时间】：2019-08-02 20:03:09 【问题描述】：我想在点击div.accordion 时显示div.panel。然而，这段代码显示了两个 div.panel 元素，而不仅仅是被点击的手风琴的子元素。
这是我的代码。我有一个使用 javascript 的解决方案，可以将 display: none 切换为 block，但使用该方法没有动画。
$(document).ready(function()
$(".panel").hide()
);
$(".accordion").click(function()
if ($(".panel:visible").length != 0)
$(".panel").slideUp("normal");
else
$(".panel").slideDown("normal");
return false;
);.accordion
cursor: pointer;
border: none;
outline: none;
transition: 0.9s;
margin: 0 auto;
.carles
background-image: url('/images/carles.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
.charlotte
background-image: url('/images/charlotte.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte
filter: grayscale(50%);
-webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
/* Panel */
.panel
padding: 18px 18px;
background-color: rgba(255, 255, 255, 1);
color: #777;
overflow: hidden;
text-align: justify;
.nom
margin-top: 10%;
text-align: center;
.coord
background-color: rgba(0, 0, 0, 0.1);
padding: 10%;
.coord i
font-size: 2em;
.coord p,
.coord a
font-weight: bold;
text-align: left;
margin-left: 4em;
<div class="accordion col-6">
<div class="carles"></div>
<div class="nom">
<h3>Name 1</h3>
<p>Employé polyvalent</p>
<i class="fas fa-caret-down"></i>
</div>
<div class="panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class="coord">
<table>
<tr>
<td><i class="fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class="far fa-envelope"></i></td>
<td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class="accordion col-6">
<div class="charlotte">
</div>
<div class="nom">
<h3>Name 2</h3>
<p>Employé polyvalent</p>
<i class="fas fa-caret-down"></i>
</div>
<div class="panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class="coord">
<table>
<tr>
<td><i class="fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class="far fa-envelope"></i></td>
<td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
</tr>
</table>
</div>
</div>
</div>【问题讨论】：
【参考方案1】：首先，您需要将依赖于正在加载的 DOM 的所有逻辑放在 document.ready 处理程序中。
关于您的问题，问题是因为您在每次.accordion 点击时在 DOM 中选择了 all .panel 元素。
为此，您需要使用 DOM 遍历来查找与单击的 .accordion 相关的 .panel。为此，您可以使用find()。然后你需要隐藏所有其他不相关的.panel 元素。
$(document).ready(function()
$(".accordion").click(function()
var $target = $(this).find('.panel');
$('.panel').not($target).slideUp();
$target.slideToggle();
);
);.accordion
cursor: pointer;
border: none;
outline: none;
transition: 0.9s;
margin: 0 auto;
.carles
background-image: url('/images/carles.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
.charlotte
background-image: url('/images/charlotte.jpeg');
background-repeat: no-repeat;
width: 35vh;
height: 35vh;
margin: 0 auto;
background-position: center;
border-radius: 5px;
.charlotte:hover,
.carles:hover,
.active>.carles,
.active>.charlotte
filter: grayscale(50%);
-webkit-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.75);
/* Panel */
.panel
padding: 18px 18px;
background-color: rgba(255, 255, 255, 1);
color: #777;
overflow: hidden;
text-align: justify;
display: none;
.nom
margin-top: 10%;
text-align: center;
.coord
background-color: rgba(0, 0, 0, 0.1);
padding: 10%;
.coord i
font-size: 2em;
.coord p,
.coord a
font-weight: bold;
text-align: left;
margin-left: 4em;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion col-6">
<div class="carles"></div>
<div class="nom">
<h3>Name 1</h3>
<p>Employé polyvalent</p>
<i class="fas fa-caret-down"></i>
</div>
<div class="panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class="coord">
<table>
<tr>
<td><i class="fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class="far fa-envelope"></i></td>
<td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
</tr>
</table>
</div>
</div>
</div>
<div class="accordion col-6">
<div class="charlotte">
</div>
<div class="nom">
<h3>Name 2</h3>
<p>Employé polyvalent</p>
<i class="fas fa-caret-down"></i>
</div>
<div class="panel">
<ul>
<li>Docteur en Géographie</li>
<li>Université de Lille & Université de Valencia</li>
<li>15 ans d'expériences dans l'éolien</li>
<li>Plus de 100 MW éoliens développés</li>
<li>Fondateur d'une société en 2004</li>
</ul>
<div class="coord">
<table>
<tr>
<td><i class="fas fa-mobile-alt"></i></td>
<td>
<p>06 07 85 88 88</p>
</td>
</tr>
<tr>
<td><i class="far fa-envelope"></i></td>
<td><a href="mailto:plop@gmail.com">plop@gmail.com</a></td>
</tr>
</table>
</div>
</div>
</div>还要注意默认情况下使用 CSS 隐藏 .panel 元素。如果你使用 JS，页面加载时会出现 FOUC。
【讨论】：
好的...效果很好..非常感谢您的回答和建议！以上是关于只显示一个 div.panel，而不是两个的主要内容，如果未能解决你的问题，请参考以下文章
我获取的数据只显示一个数据而不是显示两个（Firebase，Swift）
为啥 instagram 嵌入代码只显示一个 instagram 图标，而不是图像？