jquery - 如何使 div 消失并在单击按钮时重新出现？

Question

到目前为止我有这段代码:

$(document).ready(function(){

    $('#panel').hide();

    $("button").click(function(){
        $("#panel").fadeIn(3000);
    });
});

HTML:

<center><button class="button" id="button">CLUJ</button></center>

    <div class="panel" id='panel'>
        <p>
            Universitatea Alexandru Ioan Cuza din Iasi <br><br>
            Universitatea din Craiova <br><br>
            Universitatea din Bucuresti <br><br>
            Universitatea Babes-Bolyai din Cluj-Napoca <br><br>
        </p>
    </div>

1.div不隐藏；2.如何让div在点击按钮时出现和消失？ (类似 Accordion 的东西)

Answer 1

您可以像这样使用 jQuery 的 fadeToggle:

$(document).ready(function(){
    $("#button").click(function(){
        $("#panel").fadeToggle(3000);
    });
});

要最初隐藏 div，只需将其添加到您的 css 中:

#panel    {
    display:none;
}

JSFIDDLE: https://jsfiddle.net/bgepfuhb/3/

---

对于多个面板，您可以像这样添加唯一的 ID:

    <center><button class="button" id="buttonA">CLUJ</button></center>
    <div class="panel" id='panelA'>
        <p>....</p>
    </div>

    <center><button class="button" id="buttonB">CLUJ</button></center>

    <div class="panel" id='panelB'>
        <p>....</p>
    </div>

    <center><button class="button" id="buttonC">CLUJ</button></center>

    <div class="panel" id='panelC'>
        <p>....</p>
    </div>

JSFIDDLE: https://jsfiddle.net/bgepfuhb/7/