Question

我打算在打开另一个手风琴内容时试图隐藏一个手风琴内容，一直尝试，找不到符合我代码的手风琴内容。关于如何做到这一点的任何想法？

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

Answer 1

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

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

CodePen

JS手风琴 - 单击另一个时隐藏内容

1 个答案: