我在 Bootstrap 下拉资源上创建了一个移动菜单。
它必须以这种方式工作:当您单击汉堡菜单图标时，它会打开，如果您单击关闭图标或菜单项之外，它会关闭。
在桌面上，使用鼠标光标可以正常工作，但在移动设备上，当您单击菜单项时，触摸菜单会自动关闭。
按照下面的演示进行操作: http://jsfiddle.net/UNs9J/6344/
我的脚本:
// Insert class on the body when mobile menu is opened
$(function() {
$('.no-touch .main-header__nav .dropdown.mmenu').on('click', function(){
if ($(this).hasClass("open")) {
$('body').removeClass('mmenu-opened');
} else {
$('body').addClass('mmenu-opened');
}
});
});
$(function() {
$('.touch .main-header__nav .dropdown.mmenu').on('tap', function(){
if ($(this).hasClass("open")) {
$('body').removeClass('mmenu-opened');
} else {
$('body').addClass('mmenu-opened');
}
});
});
$(function() {
$('body').on('click', function(){
if ($('.main-header__nav .mmenu').hasClass("open")) {
$('body').removeClass('mmenu-opened');
}
});
});
我不知道该怎么办了。如果有人帮助我，我将非常感激。
提前致谢。
最佳答案
如果我理解您的问题 - 您不想在选择项目时关闭菜单吗？如果是这样，我认为你只需要停止该事件的传播。这是modified js fiddle .
这是经过更改的 JS 代码...
$(function() {
$('.no-touch .main-header__nav .dropdown.mmenu').on('click', function(event) {
if ($(this).hasClass("open")) {
$('body').removeClass('mmenu-opened');
event.stopPropagation();
} else {
$('body').addClass('mmenu-opened');
}
});
});
$(function() {
$('.touch .main-header__nav .dropdown.mmenu').on('tap', function(event) {
if ($(this).hasClass("open")) {
$('body').removeClass('mmenu-opened');
event.stopPropagation();
} else {
$('body').addClass('mmenu-opened');
}
});
});
注意，我将 event 变量传递给事件处理程序，然后在菜单打开时调用 stopPropagation()。这是您正在寻找的行为吗？
关于javascript - 移动触摸上的 Bootstrap 下拉问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34858491/