JS手风琴 - 当一个又一个被点击
问题描述:
我一直想一个又一个被打开时,隐藏一个手风琴内容隐藏内容,尝试了所有的办法,不可能找到一个适合我的代码。任何想法如何做到这一点?JS手风琴 - 当一个又一个被点击
JS:
$("body").on("click", ".accordian-trigger", function (e) {
e.preventDefault();
$(this).parents(".accordian-wrapper").toggleClass("active");
$(this).parents(".accordian-wrapper").find(".accordian-pane").slideToggle();
});
HTML:
<div class="accordian-wrapper">
<a href="#" class="accordian-trigger bg-blue1">Tomografia Cone Beam de Alta Resolução</a>
<div class="accordian-pane">
<p>Programa de visualização OnDemand 3D dental , onde se pode realizar mensurações e analises mais apuradas do volume obtido.</p>
<a href="requisicaoonline.html" class="btn">Agende seu horário</a>
</div>
</div>
CSS:
.accordian-section {
background: url(../demo-data/BG1.jpg);
background-size: cover; }
.accordian-pane {
display: none; }
.accordian-wrapper {
margin-bottom: 1px; }
.accordian-wrapper.active .accordian-trigger {
background: #274DA8; }
.accordian-trigger {
display: block;
text-decoration: none;
background: #78BCEE;
padding: 15px;
border-radius: 2px;
color: #fff;
text-transform: uppercase;
font-size: 14px;
font-weight: bold; }
答
$("body").on("click", ".accordian-trigger", function (e) {
e.preventDefault();
$(".accordian-pane").slideUp();
$(this).next(".accordian-pane").slideDown();
});
+0
!非常感谢! –
能您发布相关的HTML和CSS? –
对不起,对于 –
编辑完美工作后 –