Skip to content

Instantly share code, notes, and snippets.

@h2ospace
Created February 6, 2020 08:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save h2ospace/e4c64a729e68b49aab60b065e2b4a680 to your computer and use it in GitHub Desktop.
Save h2ospace/e4c64a729e68b49aab60b065e2b4a680 to your computer and use it in GitHub Desktop.
jQuery slide menu
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首相官邸</title>
<link href="https://unpkg.com/sanitize.css" rel="stylesheet" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<dl class="menu">
<dt>ニュース</dt>
<dd>
<ul>
<li>総理の一日</li>
<li>内閣官房長官記者会見</li>
<li>総理の演説・記者会見など</li>
<li>総理の指示・談話など</li>
<li>内閣官房長官談話など</li>
</ul>
</dd>
<dt>内閣</dt>
<dd>
<ul>
<li>閣議</li>
<li class="active">主な閣議決定・本部決定</li class="active">
<li>閣僚等名簿</li>
<li>内閣制度</li>
<li>歴代内閣</li>
</ul>
</dd>
</dl>
<script src="jquery.min.js"></script>
<script>
$('.menu dd').hide();
$('.menu dt').on('click', function() {
$(this).next().slideToggle();
})
$('.menu li').on('click', function() {
$('.active').removeClass('active');
$(this).addClass('active')
.parents('dd').prev().addClass('active');
})
$(document).ready(function() {
$('.menu li').each(function() {
if ($(this).hasClass('active')) {
$(this).parents('dd').show()
.prev().addClass('active');
}
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment