ドロワーメニューを横から動かすような場合、ドロワーメニュー以外の部分をクリックした時もハンバーガーボタンと同じようにドロワーメニューが非表示になるようにしています。
この場合、jQueryで「指定した要素以外をクリックしたら」というイベント設定が必要になります。
まずevent.targetを使ってクリックした要素をjQueryオブジェクトに変換する。
「closest」で直近の親要素を取得し、
そこに特定の要素があるかを「length」で確認しています。
「!」は否定を意味しています。
つまり、クリックした親要素内に指定した要素がない場合、
if文の中の命令が実行されます。
作例
html
<header> <h1>FELICA</h1> <p id="hum-btn"><span></span></p> </header> <nav id="g-nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Shop</a></li> <li><a href="#">Collections</a></li> <li><a href="#">Design philosophy</a></li> <li><a href="#">About</a></li> <li><a href="#">Creative Collection</a></li> <li><a href="#">Press</a></li> </ul> </nav> <div class="container"> <p><img src="img/main.jpg" alt=""></p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro voluptas facere adipisci expedita. Amet repudiandae accusamus, rerum iste repellat itaque delectus officia placeat? Delectus voluptatem perferendis, deserunt asperiores quo quod?</p> </div><!--/.container-->
$(function(){ //ハンバーガー $('#hum-btn').on('click',function(){ $(this).toggleClass('click'); $('#g-nav').toggleClass('slide'); }); $(document).on('click',function(event) { // event.targetを使ってクリックした要素をjQueryオブジェクトに変換する //「closest」でその最も近い親要素を指定し、その中に特定の要素があるかを「length」で確認 if(!$(event.target).closest('#g-nav,#hum-btn').length) { $('#g-nav').removeClass('slide'); $('#hum-btn').removeClass('click'); } }); });
コメント