jQueryのtoggle（）関数で制御されている画面のどこかをクリックするとモバイルメニューを閉じることができますか？

私のモバイルメニューは、jQuery toggle()機能によって開閉されます。それを開くために使用したのと同じハンバーガーアイコンをもう一度クリックして閉じることができるほか、開いている間は画面のどこかをクリックして閉じることもできます。ただし、画面上の任意の場所をクリックすると、toggle()の機能が次のように「妨害」されます。メニューが開いたら、画面のどこかをクリックして閉じると、再びモバイルメニューアイコンをクリックして開きます。私はそれをクリックする（toggle()の機能は、画面上をクリックしてメニューを閉じたことを「知っていない」ため）。jQueryのtoggle（）関数で制御されている画面のどこかをクリックするとモバイルメニューを閉じることができますか？

この問題を解決するにはどうすればよいですか？

JS：

$('.header__menu_icon').toggle(function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_opening'); 
}, function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_closing'); 
}); 
$(document).click(function() { 
    $('.wrap').removeClass('mobile_menu_opening mobile_menu_closing'); 
    $('.wrap').addClass('mobile_menu_closing'); 
}); 
$('.mobile_menu').click(function(event) { 
    event.stopPropagation(); 
});

HTML：

<body> 
<div class='wrap'> 
    <div class='header'> 
    <div class='mobile_menu'> 
     ... 
    </div> 
    </div> 
</div> 
</body>

はCSS：

@keyframes mobile_menu_opening { 
    0% { transform: translateX(0px); } 
    100% { transform: translateX(-280px); } 
} 
@keyframes mobile_menu_closing { 
    0% { transform: translateX(-280px); } 
    100% { transform: translateX(0px); } 
} 
.mobile_menu_opening { 
    animation-name: mobile_menu_opening; 
    animation-duration: 2s; 
} 
.mobile_menu_closing { 
    animation-name: mobile_menu_closing; 
    animation-duration: 1s; 
} 
.wrap { 
    position: relative; 
}

出典

2016-07-05 drake035

私は単純にトグル機能を回避することにより、これを達成するであろう。また、あなたのコードは次のように最適化することができます。

function menuToggle() { 
    var openClass = 'mobile_menu_opening'; 
    var closedClass = 'mobile_menu_closing'; 
    var $wrap = $('.wrap'); 
    if ($wrap.hasClass(openClass)) { 
    $wrap.removeClass(openClass); 
    $wrap.addClass(closedClass); 
    } else { 
    $wrap.removeClass(closedClass); 
    $wrap.addClass(openClass); 
    } 
} 

$('.header__menu_icon').on('click', function() { 
    menuToggle(); 
}); 

$(document).on('click', function() { 
    menuToggle(); 
}); 

$('.mobile_menu').on('click', function(event) { 
    event.stopPropagation(); 
});

出典

2016-07-05 18:41:25 Mila

感謝を指定しないで使用してください。あなたのコードを使って、メニューが開き、すぐに閉じます。 – drake035

あなたのコードをどこかに置いて、あなたの実装が間違っているかどうか確認できますか？それはうまく動作するはずです – Mila

は

$("body:not(.mobile_menu)").click(function() { 
    $("").removeClass(""); 
    - or - 
    $("").toggle(""); 
});

出典

2016-07-05 18:44:53 Lowkase

" - または - "が論理的に何を表しているかわかりません – drake035

jQueryのtoggle（）関数で制御されている画面のどこかをクリックするとモバイルメニューを閉じることができますか？

答えて

関連する問題