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; }

来源

2017-03-17 Nikolas Oliveira

能您发布相关的HTML和CSS？ –

对不起，对于 –

编辑完美工作后 –

$("body").on("click", ".accordian-trigger", function (e) { 
    e.preventDefault(); 

    $(".accordian-pane").slideUp(); 
    $(this).next(".accordian-pane").slideDown(); 
});

CodePen

来源

2017-03-17 18:51:31

！非常感谢！ –

JS手风琴 - 当一个又一个被点击

回答

相关问题