Question

我在导航中有一个嵌套的ul，当我点击显示子链接的父链接时，问题是，如果我点击第一个嵌套链接，然后再次单击关闭它就可以了。

如果我然后转到第二个嵌套链接并执行相同的工作，那么。

但是，如果我回到第一个嵌套链接，它会打开关闭，然后再次打开，我无法解决原因。

似乎要记录我点击链接的次数，我无法弄清楚如何阻止它。

希望有更多jQuery经验的人可以帮助解决这个问题。

$(document).ready(function ($) {
    $(".child-class-ul").hide();
    $("#navHdr li:has(ul.child-class-ul)").hover(function () {
        $(this).children("a").click(function () {
            $(this).closest("li").find("[class^='child-class-ul']").slideToggle();
            return false;
        });

    });

})

--------------------------- HTML ------------------- --------

<ul id="navHdr" class="nav navbar-nav header-nav">
    <li class="nav-item" role="presentation"><a id="primary-header-link" href="/"><img src="/media/1002/mobile.png" height="80" width="180" /></a></li>
    <li class="nav-item" role="presentation"> <a class="nav-link" href="/about/">About</a> </li> 
    <li class="nav-item" role="presentation"> <a class="nav-link" href="/contact/">Contact</a> </li> 
    <li class="nav-item" role="presentation"> <a class="nav-link" href="/services/">Services</a> 
       <ul class="child-class-ul"> 
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/services/">Services</a> </li> 
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/services/accessories/">Accessories</a> </li> 
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/services/buy-back/">Buy Back</a> </li> 
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/services/warranty/">Warranty</a> </li> 
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/services/repairs/">Repairs</a> </li> 
    </ul> </li> 
  <li class="nav-item" role="presentation"> <a class="nav-link" href="/">Login/Create</a> 
    <ul class="child-class-ul">
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/members-dashboard/create-account/">Create Account</a> </li> 
        <li class="child-nav nav-item" role="presentation"> <a class="nav-link" href="/members-dashboard/login/">Login</a> </li> 
    </ul> 
  </li>
</ul>

---------------------修正-------------------

$(document).ready(function($) {
    $(".child-class-ul").hide();

    $(".nav-item > p").click(function() {
        $(this).next(".child-class-ul").toggle("slow");
    });
})

Answer 1

我认为问题是每次你悬停它都会为所有的a-tags添加一个新的事件处理程序。因此，当你继续盘旋并点击它时会发疯“

也许您应该尝试在#navHdr上使用＆＃34; on＆＃34;设置1个事件。

$("#navHdr").on("click", "li:has(ul.child-class-ul) a", function(){
    $(this).closest("li").find("[class^='child-class-ul']").slideToggle();
});

不确定示例是否有效。使用＆＃34; on＆＃34;您可以添加子选择器的事件，因此每次单击它都会检查元素是否与您的选择器匹配。

Answer 2

每次用户将鼠标悬停在> curl http://localhost:9200 { "name" : "sRp21hL", "cluster_name" : "docker-cluster", "cluster_uuid" : "ZGmAUJMwRP-txHNr73vcNg", "version" : { "number" : "7.0.0-alpha1", "build_hash" : "ba9e2e4", "build_date" : "2018-01-23T14:08:40.916181Z", "build_snapshot" : true, "lucene_version" : "7.2.1", "minimum_wire_compatibility_version" : "6.3.0", "minimum_index_compatibility_version" : "6.0.0-beta1" }, "tagline" : "You Know, for Search" }上时，您就会绑定新的点击事件。用户徘徊的次数越多，单次点击就会触发更多点击事件。

看起来你根本不需要悬停事件，因为所有你真正用它来限制li选择器。您也可以相当简化这些选择器（a是不必要的，因为如果应用于不匹配的元素，事件将不起作用;当您使用时，您不需要:has()知道确切的班级名称。）

<强>更新既然您已经提供了HTML，那么第二个问题就会显现出来：您正在使用链接来触发子菜单的打开和关闭，但您也使用与您相同的链接知道，链接。到其他页面。这不起作用，因为启用子菜单打开/关闭的脚本需要阻止链接作为链接工作，并在子菜单打开之前将用户带到另一个页面。

如果存在子菜单，我已将下面的脚本修改为返回false;这样，其余链接将正常运行。

这意味着带有子菜单的列表项上的URL - “服务”中的[class^='...']和“登录/创建”中的/services - 仍然无法访问;您需要确定这些链接是作为页面链接存在还是作为子菜单的可供性存在，它们不能同时存在。

（就像用户界面说明一样，您应该在视觉上区分指向新页面的链接与打开子菜单的链接，这样用户就不会感到意外。）

$(document).ready(function($) {
  $(".child-class-ul").hide();
  $("#navHdr li a").click(function() {
    var submenu = $(this).closest("li").find(".child-class-ul");
    if (submenu.length) {
      submenu.slideToggle();
      return false;
    } else {
      // no submenu exists, so do nothing. This allows the event to bubble normally and fire the link href
    }
  });
})

Answer 3

将函数绑定到$("#navHdr li:has(ul.child-class-ul)").hover，然后将函数绑定到$(this).children("a").click。

基本上每次将鼠标悬停在该元素上时，您都会添加另一个即将触发的点击事件处理程序。

除非您需要 hover函数用于其他内容，否则这应该可行。

$("#navHdr li:has(ul.child-class-ul) a")..click(function () {
        $(this).closest("li").find("[class^='child-class-ul']").slideToggle();
        return false;
});

在“N＆＃39; N＆＃39;之后，jQuery切换进入循环。点击

3 个答案: