Question

当我将鼠标悬停在菜单中的父链接上时，“toggle-active”类将添加到span标记中，以便更改箭头图像。当我将鼠标悬停在.sub-menu容器内的父链接的子链接上时，我还希望将此类添加到span标记中，但我无法使其工作。这是使用jQuery我正在使用的菜单的结构::

jQuery(".sub-menu").hide(); 

jQuery("#gallery-nav").find("li").each(function() {

  if (jQuery(this).find("ul").length > 0) {

    jQuery("<span class=\"gallery-toggle-button\">").appendTo(jQuery(this).children(":first"));

    jQuery("#gallery-nav li a").hover(function(){
      jQuery(this).children(".gallery-toggle-button").addClass("toggle-active");
    }, function () {
      jQuery(this).children(".gallery-toggle-button").removeClass("toggle-active");
    });

    jQuery("#gallery-nav li a").hover(function(){
      jQuery(this).next("ul").slideDown('fast');
    });

    jQuery("#gallery-nav li ul").hover(function(){
      jQuery(this).slideDown('fast');
    }, function () {
      jQuery(this).slideUp('fast');
    });

    jQuery("#gallery-nav li ul").hover(this).prev(function(){
      jQuery("#gallery-nav li a").children(".gallery-toggle-button").addClass("toggle-active");
    }, function () {
      jQuery("#gallery-nav li a").children(".gallery-toggle-button").removeClass("toggle-active");
    });
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">Link 1 <span class="toggle-active"></span></a>
    <ul class="sub-menu">
      <li><a href="#">Sub link 1</a></li>
    </ul>
  </li>
</ul>

Answer 1

首先，您可能需要考虑使用:hover伪类而不是jquery。例如，它描述了here。它会清除所有javascript混乱。

至于这个特殊问题，您是否考虑过检测父元素li.menu-item上的悬停？它包括每个特定的菜单项（如'abstract'及其所有子菜单元素（'design'，'blog'和'full width page'）。
它可能看起来像这样

li.menu-item:hover {
    // some css to change arrow here
}

或者，如果您需要选择特定范围，

li.menu-item:hover span.gallery-toggle-button {
    background: url('your image path');
}

修改
来自网站的相关代码：

<li class="menu-item menu-item-type-taxonomy menu-item-530" id="menu-item-530"> <a href="http://ghostpool.com/wordpress/phideo/?gallery_categories=abstract">Abstract <span class="gallery-toggle-button"></span> </a> <ul class="sub-menu" style="display: none;"> <li class="menu-item menu-item-type-taxonomy menu-item-531" id="menu-item-531"><a href="http://ghostpool.com/wordpress/phideo/?gallery_categories=design">Design</a></li> <li class="menu-item menu-item-type-post_type menu-item-537" id="menu-item-537"><a href="http://ghostpool.com/wordpress/phideo/?page_id=101">Blog</a></li> <li class="menu-item menu-item-type-post_type menu-item-539" id="menu-item-539"><a href="http://ghostpool.com/wordpress/phideo/?page_id=40">Full Width Page</a></li> </ul> </li>

Answer 2

我看到了一些问题。

.sub-menu

有破折号所以它与这里的ul不匹配

<ul class="submenu">

接下来，Javascript关闭很棘手。在这里的这段代码中，“this”停止意味着“li”并且开始意味着你匹配的元素，即“a”。

jQuery("#gallery-nav li a").hover(function(){
    jQuery(this).children(... // <- "this" now means "a", not "li"

换句话说，你应该这样做

var top_li = this;
jQuery("#gallery-nav li a").hover(function(){
    jQuery(top_li).children(...

最后，我只是这样做了。

$(function() {
  $(".sub-menu").hide();
  $("#gallery-nav li").each(function() {
    if ($(this).find("ul").length) {
      $(this).addClass("top_menu_li");
      $(this).find("a").eq(0).addClass("top_menu_a").append($("<span/>"));
    }
  });
  $(".top_menu_li").each(function() {
    var top_menu_li = $(this);
    top_menu_li.hover(function() {
      top_menu_li.find(".top_menu_a span").addClass("toggle-active");
      top_menu_li.find(".sub-menu").show();
    }, function() {
      top_menu_li.find(".top_menu_a").removeClass("toggle-active");
      top_menu_li.find(".sub-menu").hide();
    });
  });
});

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
  </head>
  <body>
    <ul id="gallery-nav">
      <li>
        <a href="#">Link 1</a>
        <ul class="sub-menu">
          <li><a href="#">Sub link 1</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Link 2</a>
        <ul class="sub-menu">
          <li><a href="#">Sub link 2</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

<强>被修改

现在它添加了类和跨度。 ghostpool，“查找”目标儿童，所以它只显示正确的子导航。复制并粘贴该HTML并亲自试用。

当其他子链接悬停时添加/删除标记类

2 个答案: