前回は、CSSでアコーディオンメニューを実装した。
今回は、jQueryでアコーディオンメニューをやってみた。
前回のリンクはこちら→アコーディオンメニューをやってみた
ソース
accordion_practice.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アコーディオンメニュー 練習</title>
<link rel="stylesheet" href="base.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function () {
$('#accordion p').click(function() {
$(this).next('ul').slideToggle();
});
});
</script>
</head>
<body>
<div id="accordion">
<p>メニュー</p>
<ul>
<li><a href="#">サブメニュー1</a></li>
<li><a href="#">サブメニュー2</a></li>
<li><a href="#">サブメニュー3</a></li>
</ul>
</div>
</body>
</html>
base.css
#accordion {
max-width: 300px;
}
#accordion p {
margin: 0;
padding: 0;
background: #f00;
}
#accordion ul {
margin: 0;
padding: 0;
list-style: none;
display: none;
}
#accordion li {
margin: 0;
padding: 0;
background: #0f0;
}
#accordion a {
margin: 0;
padding: 0;
text-decoration: none;
}
解説
重要なポイントは下記のコードとなります。
$(function () {
$('#accordion p').click(function() {
$(this).next('ul').slideToggle();
});
});
p要素をクリックした時、slideToggleがul要素を開いたり閉じたりする。
CSSでプロパティを使うより、簡単に実装できた。