2016年11月7日 星期一
jquery 摺疊QA的sample
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/style01.css">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/all01.js"></script>
</head>
<body>
<div class="question-list">
<div class="question">
<h3>1.請問1+1=多少</h3>
<p>答案記得沒錯的話，應該是2吧！</p>
</div>
<div class="question">
<h3>2.那假如是2+2的話呢</h3>
<p>當然是4啊！</p>
</div>
<div class="question">
<h3>3.ok，所以3+3就等於7嘍</h3>
<p>...我看你還是重讀小學吧！</p>
</div>
</div>
</body>
</html>
=============================================================
css:
.question-list{
margin: 0 auto;
width: 500px
}
.question h3{
border: 1px solid gray;
padding: 5px;
font-size: 18px;
}
.question h3:hover,.question h3.active{
background: blue;
color:#fff;
}
.question p{
display: none;
padding: 5px;
}
================================================================
jquery:
jQuery(document).ready(function($) {
$('.question h3').click(function(event) {
$(this).toggleClass('active');
$(this).parent().find('p').slideToggle();
// 自己以外的 p 隱藏起來
$(this).parent().siblings().find('p').slideUp();
// 自己以外的 h3 移除u樣式
$(this).parent().siblings().find('h3').removeClass('active');
/* Act on the event */
});
});
訂閱：
張貼留言 (Atom)
沒有留言:
張貼留言