Question

我已经将我的第一个HTML转换为WordPress网站并且有一个响应式子菜单在移动设备上无法正常打开，因为很明显没有悬停功能。我已经找到了解决方案并且因为我的JavaScript知识不存在而一无所获，因此从这里的示例中复制和粘贴代码并没有让我得到我想要实现的结果。

我要修复的菜单位于以下网站：

https://www.piogroup.in/wordpress/

我有2个父母是＆＃34;关于＆＃34;和＆＃34;产品＆＃34;它们不是可点击的链接。到目前为止，我已经尝试了以下代码：

$(document).ready(function(){
$("#menu-item-74").off("click").on("click", function() {
    $(".sub-menu").fadeToggle("slow");
});
})

$(document).ready(function(){
$("#menu-item-72").off("click").on("click", function() {
    $(".sub-menu").fadeToggle("slow");
});
})

然后添加了这个：

var $handle = $('.sub-menu').prev();

var opened = 0;
$handle.on('click', function(e){

  if (opened) {
window.location.href = $(this).attr('href');
  } else {
e.preventDefault();
e.stopPropagation();
$('.sub-menu').slideToggle();
opened = 1;
}
});

$('html').on('click', function(){
  if (opened) {
$('.sub-menu').slideToggle();
opened = 0;
}
   });

我不确定我是否打算提出任何其他文件，但可以这样做。

Answer 1

@R Alexander如果我理解正确，您的子菜单无法在移动设备上运行。下面的代码可能会帮助你。

minWidth = $(window).width();

if(winWidth < 768){
$(".menu-main-menu-container li").click(function(){
   $(".menu-main-menu-container li ul").slideToggle();
   $(".menu-main-menu-container li ul").parent().siblings().children(".menu-main-menu-container li ul").slideUp();
});
}

Answer 2

我查看了你的代码并且存在一些逻辑上的不一致。

首先，你应该改变如下：

var $handle = $('.sub-menu').prev();

var opened = 0;
$handle.on('click', function(e) {

  if (opened) {
    window.location.href = $(this).attr('href');
  } else {
    e.preventDefault();
    e.stopPropagation();
    $(this).next().slideToggle();
    opened = 1;
  }
});

这使特定点击的元素变为slideToggle而不是所有.sub-menu元素。

然后，为了模拟下拉的结束，请使用：

$('html').on('click', function() {
  if (opened) {
    $('.sub-menu').slideUp();
    opened = 0;
  }
});

响应子菜单打开点击不工作

2 个答案: