課題

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()
ウェブカツ