課題
hoverを使ったドロップダウンメニューの作り方をアレンジして、onを使って書き直してみる。
仕様
親メニューをクリックすると子メニューが出現し、さらに親メニューをダブルクリックすると子メニューが閉じる。
メモ
-
on()メソッドは、複数のイベント定義ができる。
$('要素').on({ イベント1, イベント2});
例えば、
$('#button').on({
'mouseenter': function(){
alert("マウスオーバーされた");
},
'mouseleave': function(){
alert("マウスアウトした");
}
});
- イベント1とイベント2両方のキーにイベントタイプ
clickを指定すると動かなくなる。（当たり前…）
ファイル構成
HTML
<body>
<div id="main">
<ul class="menu">
<li>menu 1</li>
<li>menu 2
<ul class="sub">
<li><a href="#">menu 2-1</a></li>
<li><a href="#">menu 2-2</a></li>
</ul>
</li>
<li>menu 3
<ul class="sub">
<li><a href="#">menu 3-1</a></li>
<li><a href="#">menu 3-2</a></li>
</ul>
</li>
<li>menu 4
<ul class="sub">
<li><a href="#">menu 4-1</a></li>
<li><a href="#">menu 4-2</a></li>
<li><a href="#">menu 4-3</a></li>
</ul>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
CSS
#main{
margin: 100px auto;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
color: #fff;
}
ul.menu li{
float: left;
position: relative;
margin: 0 0 0 1px;
padding: 5px;
width: 200px;
background: #555555;
display: block;
}
ul.sub{
display: none;
position: absolute;
margin-left: -6px;
padding: 0;
}
ul.sub li a{
padding: 5px 10px;
margin-left: -5px;
margin-right: -5px;
margin-bottom: -5px;
display: block;
color: #fff;
}
ul.sub li a:hover{
background: #ff9900;
text-decoration: none;
}
jQuery
//
// $(function(){
// $("ul.menu li").hover(function(){
// $("ul.sub:not(:animated)",this).slideDown();
// }, function(){
// $("ul.sub",this).slideUp();
// });
// });
$(function(){
$("ul.menu li").on({
'click': function(){
$("ul.sub:not(:animated)",this).slideDown();
},
'dblclick': function(){
$("ul.sub:not(:animated)",this).slideUp();
}
});
});
参考
jQueryでドロップダウンメニューを作成する方法
jQuery on() イベントの種類
jQueryでクリックイベントで処理を実行する：on(), click()
ウェブカツ