只显示一个div.panel,而不是两个
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了只显示一个div.panel,而不是两个相关的知识,希望对你有一定的参考价值。
当我点击div.panel
时,我想展示div.accordion
。然而,这段代码显示了两个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>
答案
首先,您需要将依赖于DOM的所有逻辑放在document.ready处理程序中。
关于您的问题,问题是因为您在每个.panel
点击中选择DOM中的所有.accordion
元素。
为了使你能够按需要工作,你需要使用DOM遍历来查找与被点击的.panel
相关的.accordion
。要做到这一点,你可以使用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>
以上是关于只显示一个div.panel,而不是两个的主要内容,如果未能解决你的问题,请参考以下文章
为啥我的 ListView 显示在一个片段中而不是另一个片段中?
我获取的数据只显示一个数据而不是显示两个(Firebase,Swift)