[jQuery]PC表示はマウスオーバー、SP表示はクリックで開閉するギミックの一つの解

地味なところ。

概要
組んでいく

概要

こういう感じのがあるとする。

<header>
    <nav>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li class="sub">
                <span>Subnav</span>
                <ul>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header>

これで、↓をやりたいとする。

PC：マウスオーバーで下層ul表示
SP：クリック（タップ）で下層ul表示

組んでいく

環境はjQuery3系で確認済み。他は試してないからわからない。

$(function(){
    $(window).on('load resize', function(){
        if(window.matchMedia('(max-width:767.98px)').matches){
            $('header').addClass('sp');
        }else {
            $('header').removeClass('sp');
        }
    })
    $('header .sub').children('span').on('click',function(){
        //クリック時
        if($('header').hasClass('sp')){
            //スマホ表示なら
            $(this).next('ul').slideToggle();
        }
    }).on('mouseover',function(){
        //マウスオーバー時
        if(!$('header').hasClass('sp')){
            //スマホ表示じゃなかったら
            $(this).next('ul').fadeIn();
        }
    })
    $('header').on('mouseleave',function(){
        //header内の要素からマウスを外した時
        if(!$('header').hasClass('sp')){
            //スマホ表示じゃなかったら
            $('header .sub > ul').fadeOut();
        }
    })
})

まず、PC/SPはheaderに.spの付与で判定する。

.on()でクリック時とマウスオーバー時を作って、.spの有無を噛ませつつそれぞれの動作を仕込む。

クリック時はtoggleで済むんだけど、マウスオーバーにはひと手間加える。

ここに.on()でmouseleaveを書くと下層メニューが入ってるliからカーソルを外したら消える、それはそれでいいんだけど、マウスオーバーしたところから直接下層メニューにカーソルを持っていかないと下層メニューが非表示になる。

それだとピーキーな仕様になるのでヘッダーからカーソルを外したときに非表示にするように、非表示のギミックはheaderがmouseleaveの時にしておくのが無難かなって感じの。

まあデザインの組み方にもよるんだけどね。

こんな感じの組み方がイメージできれば応用の幅が広がると思う。