前提・実現したいこと
元ネタ
https://codepen.io/RRoberts/pen/OXxkzm?q=mobile%2520navigation&order=popularity&depth=everything&show_forks=false
こちらの一番左のタイプのドロワーに、範囲外のクリックでも閉じるのを追加したいです。
https://qiita.com/mabots/items/74c21ebcedf0004f7fb5
ここを参考に書いたのですが
記述方法が悪いのか、動きません、
どう書くのが正しいのでしょうか?
元のソースコード
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script> jQuery(function($) { //MOBILE ONE AND MOBILE THREE var menu = "close"; $(".menu-toggle").click(function() { if (menu === "close") { $(this).parent().next(".mobile-nav").css("transform", "translate(0, 0)"); menu = "open"; } else { $(this).parent().next(".mobile-nav").css("transform", "translate(-100%, 0)"); menu = "close"; } }); }); </script>
試したこと
<script> jQuery(function($) { //MOBILE ONE AND MOBILE THREE var menu = "close"; $(".menu-toggle").click(function() { $(this).parent().next(".mobile-nav").css("transform", "translate(0, 0)"); menu = "open"; }); $(document).on('click touchend', function(event) { if (!$(event.target).closest('.mobile-nav').length) { // ここに処理; $(this).css("transform", "translate(-100%, 0)"); menu = "close"; } }); }); </script>
回答3件
あなたの回答
tips
プレビュー