Question

要求：

当我第一次点击带有下拉菜单的菜单项时，它应显示其下拉菜单，当我第二次点击同一菜单项时，它会重定向到自己的页面。
请考虑一下情况。菜单项仅在其下拉列表打开时重定向到其自己的页面

参考图片：

参考网站链接：

Reference website link

请参阅referaence网站：

1）请在移动视图中打开参考网站链接 2）点击关于页面而不是牙科页面而不是再次关于页面，当你第二次点击关于页面它进入它自己的页面。但在这种情况下，我想再打开它的下拉列表如果我点击关于页面而不是它进入自己的页面

目前我正在使用 jQuery bind 功能并通过 event.preventDefault（）禁用链接，但我没有解决我的问题这是我的代码

jQuery代码：

$(document).ready(function(){
    $(".flexnav li.parent-menu-item > a").bind("click.myclick", function(event) {
        event.preventDefault();
        $(".flexnav li .sub-menu").hide();
        $(this).unbind(".myclick");
        $(this).parents(".flexnav li.parent-menu-item").children(".sub-menu").toggle();
    }); 
});

对不起我的语言错误
谢谢！

Answer 1

不应该处理$（document）.ready函数中的click事件，而应该尝试与每个li内联。

<li id="link1" onclick="ShowMenu('#menu1', 'index.html')">
  <ul class="dropdown" id="menu1">
    ...
  </ul>
</li>
<li id="link2" onclick="ShowMenu('#menu2', 'aboutus.html')">
  <ul class="dropdown" id="menu2">
    ...
  </ul>
</li>

<script>
  function ShowMenu(menuId, linkRef){
    var display = $(menuID).css('display');
    if(display == 'block')
      window.location.href = linkRef;
    else{
      $('dropdwon').hide();          
      $(menuId).show();
    }
  }
</script>

所以，在这里，我正在做的是使用我想要显示的菜单的id调用ShowMenu（）函数，作为参数和链接到它的页面的URL。然后，该功能检查是否显示该菜单。如果显示，则将用户重定向到URL。如果没有，则继续隐藏所有其他下拉列表并仅显示被点击的下拉列表。

Answer 2

您可以使用CSS类切换以查看下拉列表是否已打开，并相应地执行操作。（假设您当前的代码正常工作以打开下拉列表）

$("body").on("click",".flexnav li.parent-menu-item > a",function(e){
   var dropdowns=$(this).parent('li').children(".sub-menu");
   var menu=$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu");
   if(dropdowns.size()>0) {
       if(!menu.hasClass('open')) {
           e.preventDefault();
           menu.addClass('open');
           menu.show();
       }
   }
});

首次单击后启用链接

2 个答案: