close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.accordion-panel {
display: none;
}
</style>
</head>
<body>
<section class="page">
<ul class="accordion">
<li>
<button class="accordion-control">第一摺</button>
<div class="accordion-panel">
<p>第一摺內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt laudantium, molestiae, tempora eligendi qui saepe est voluptatum doloremque! Blanditiis, perferendis.</p>
</div>
</li>
<li>
<button class="accordion-control">第二摺</button>
<div class="accordion-panel">
<p>第二摺內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat voluptates maxime est, quisquam dolorem fugit laboriosam vel ullam cupiditate dolor.</p>
</div>
</li>
<li>
<button class="accordion-control">第三摺</button>
<div class="accordion-panel">
<p>第三摺內容 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque numquam, nostrum consectetur deleniti? Nemo totam saepe sed, repellendus, velit corporis?</p>
</div>
</li>
</ul>
</section>
<script type="text/javascript">
//事件，選擇器（總是能觸發）
$('.accordion').on('click','.accordion-control',function(e){
e.preventDefault();
/*被點到的東西他弟，沒有animated的全部（進行中不會受影響），展開或隱藏*/
$(this).next('.accordion-panel').not(':animated').slideToggle();
})
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
