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

【问题标题】：Add/remove class of tag when other child links are hovered over当其他子链接悬停时添加/删除标签类
【发布时间】：2010-09-07 15:59:41
【问题描述】：

当我将鼠标悬停在菜单中的父链接上时，“toggle-active”类被添加到 span 标签中，因此箭头图像被更改。当我将鼠标悬停在.sub-menu 容器内的父链接的子链接上时，我还希望将此类添加到跨度标记中，但我无法让它工作。这是我正在使用的 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>

【问题讨论】：

标签： jquery menu hover parent-child

【解决方案1】：

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

对于这个特殊问题，您是否考虑过检测悬停在父元素 li.menu-item 上？它包括每个特定的菜单项（如“抽象”及其所有子菜单元素（“设计”、“博客”和“全宽页面”）。
它可能看起来像这样

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>

【讨论】：

使用 CSS 是个好主意。 Nikita 是对的，你可以少写很多 Javascript。
我想在悬停时更改的元素，“gallery-toggle-button”不是菜单项链接的子项，它只是在它旁边，所以我不知道怎么做在这种情况下使用 :hover？
@ghostpool 我指的是您网站上的代码（顺便说一句，您为什么要删除链接？）并且萤火虫清楚地表明 li.menu-item 有两个孩子: a 元素用于菜单项本身（内部带有 span.gallery-toggle-button）和 ul.sub-menu 用于所有子元素。因此，您的陈述在技术上并不正确： gallery-toggle-button 是 menu-item 的后代
@Nikita：我只是认为将相关代码粘贴到我的帖子中而不是让人们访问该网站会更容易。我仍然看不到，如果我将鼠标悬停在.sub-menu 中的一个链接上，我怎么能在悬停时更改.gallery-toggle-button 的背景图像。它不是我想要悬停的链接的子节点。是的，如果我将鼠标悬停在父 .menu-item 链接上，但不是 .sub-menu 中的 .menu-iitem 链接，它会起作用。你不同意吗？
@ghostpool 请注意，父菜单项（您可以创建一个单独的类以将其与子菜单项区分开来）包括 'a' 标记和子菜单元素。当您将鼠标悬停在子元素上时，甚至会为其所有父元素触发相同的悬停（最多 'body' 和 'html' 元素）。

【解决方案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，然后自己尝试一下。

【讨论】：

在类名中使用破折号并没有什么问题：我一直使用它们，用于 css 和 javascript 操作。
尼基塔，我知道。破折号本身不是问题。我刚刚指出“.sub-menu”有破折号，而 class="submenu" 没有。
谢谢戴夫。这只是一个错字，在网站本身的两个子菜单实例中都存在连字符。不幸的是，这不起作用，我使用的是 WordPress，菜单结构是自动生成的，我必须使用 jQuery 为带有子菜单的列表项插入 span 标签，我还需要使用 .children 和 .next 来仅定位悬停在当前列表项上，否则所有列表项都显示其子菜单。
ghostpool，试试看。有用。它还应该反映 wordpress 生成的 html。
@Dave：这段代码运行良好，我肯定会使用它。只有一个问题，“toggle-active”类在不再悬停后不会被删除。我需要这样做，以便箭头图像恢复到原来的样子。