首次点击后启用链接答案

【问题标题】：Enable link after first click首次点击后启用链接
【发布时间】：2015-09-12 08:30:20
【问题描述】：

要求：

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

参考图片：

参考网站链接：

Reference website link

参考网站注意事项：

1) 请在手机端打开参考网站链接。
2）点击关于页面而不是牙科页面，然后再次点击关于页面，当你第二次点击关于页面时，它会转到它自己的页面。但在这种情况下，我想再次打开它的下拉菜单

目前我正在使用 jQuery 绑定 功能并通过 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(); }); });

抱歉我的语言错误
谢谢！

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

与其在 $(document).ready 函数中处理点击事件，不如尝试在每个 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>

所以，在这里，我正在做的是调用 ShowMenu() 函数，并将我要显示的菜单的 id 作为参数和链接到它的页面的 url。然后该函数检查该菜单是否正在显示。如果显示，则将用户重定向到 url。如果没有，那么它会继续隐藏所有其他下拉菜单并只显示被点击的那个。

【讨论】：

【解决方案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();
       }
   }
});

【讨论】：