到目前为止我有这段代码:
$(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 的东西)
最佳答案
您可以像这样使用 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/
关于jquery - 如何使 div 消失并在单击按钮时重新出现?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36899245/