Restoration
12/1/2016 - 6:56 AM

jQueryプルダウンメニュー

jQueryプルダウンメニュー

#プルダウンメニュー

クリック時にプルダウンメニューが表示される
領域外を押下したらメニューは閉じる

<div id="menu">
    <span class="trigger">メニュー</span>
    <ul>
        <li><a href="#">メニュー 1</a></li>
        <li><a href="#">メニュー 2</a></li>
        <li><a href="#">メニュー 3</a></li>
    </ul>
</div>
#menu{
  position: relative;
}
span.trigger {
  cursor: pointer;
}
ul {
  display: none;
  position: absolute;
}
$(function () {
    $('span.trigger').click(function() {
        $(this).next('ul').slideToggle('fast');
    });

    $('span,ul').hover(function(){
        overFlg = true;
    }, function(){
        overFlg = false;
    });

    $('body').click(function() {
        if (overFlg == false) {
            $('ul').slideUp('fast');
        }
    });
});