jquery悬停找不到父跨度答案

【问题标题】：jquery hover can't find parent spanjquery悬停找不到父跨度
【发布时间】：2011-05-27 17:18:48
【问题描述】：

我确信这已经涵盖了，但是有太多的 jquery 父问题，筛选它们是一项非常艰巨的任务。

我有一个这样的无序菜单下拉列表页面：

  <ul class="topnav">
    <span><li><a href="firstitem.php">Contact</a>
        <ul class="subnav">
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="testlink.php">Test Link</a></li>
        </ul>
    </li></span>

    <span><li><a href="seconditem.php">Ministries</a>
      <ul class="subnav">
        <li><a href="#">link 1</a></li>
        <li><a href="#">link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
         <li><a href="#">Link 6</a></li>
      </ul>
    </li></span>
</ul>

目前，我的 jquery 是这样引用的：

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
});

下拉菜单有效，但我找不到我正在寻找的跨度，所以目前它永远不会向上滑动。任何帮助，将不胜感激。谢谢

另外，我想在不添加单个标签 ID 的情况下执行此操作。是的，这会更容易，但我从其他人那里得到了这段代码，我想保持相似。

【问题讨论】：

你为什么要用<span> 包裹你的<li>？我认为这不是有效的 HTML。
我认为没有像 medium 这样的 duration 字符串 fast 和 slow 或使用数字。Reference
我不知道这违反了验证规则，但我这样做是为了当我离开主页按钮时，列表项不会立即向上滑动。

标签： jquery menu find parent

【解决方案1】：

这里有几个问题。

不要将<li> 放在<span> 中。它破坏了 html 验证规则并可能导致问题。
slideup不起作用的原因是它在一个新函数中，意味着this的范围发生了变化。

代码

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        var $ul = $(this).parent().find("ul.subnav");
        $ul.slideDown('fast');
        $(this).parent().parent("span").hover(function() {
        //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $ul.slideUp('medium');
        });
    });
});

这应该更适合你。

【讨论】：

感谢修复我的标记，不知道为什么结果如此糟糕。
除了does work（由 OP 发布），它只是没有在页面加载时设置。鼠标悬停从列表顶部向下。至少在 FF4 中，它对我有用。
列表在标记中的工作方式有点烦人。它认为它是列表的一部分，因此将其视为文本。
他说向下滑动有效，但向上滑动不起作用，除非我对他的解释有误。从技术上讲，这不是最好的解决方法，但它是让上滑找到正确元素的最简单方法。
据我所知，它工作得最好；它确实向上/向下滑动。它只是没有被触发。看我的回答。我并不是说 OP 不能在代码中做得更好，只是代码本身可以工作。

【解决方案2】：

使用 parents(selector) 代替 parent()。

【讨论】：

更好的是，使用 .closest(selector) - 这样你就可以确保你只会得到一个结果.. 最接近的父级。
@John Stickler：很好，谢谢。不知何故，我根本不使用 .closest() 所以它没有越过我的脑海..
我从 parent() 开始，然后使用 parents()。然后我找到了 .closest() 并且再也没有回头 :)
你确定这是代码出了什么问题（就 OP 的问题而言）？

【解决方案3】：

在这种情况下 $(this).parent() 是 li 元素，$(this).parent().parenT() 是 ul class="subnav" 元素和 $(this).parent()。 parent().parent() 是 span 标签。

【讨论】：

【解决方案4】：

代码在工作，除了页面加载（意味着一旦你将鼠标悬停在它上面，它就会开始工作）。你应该能够做到：

$(document).ready(function(){
    $("ul.topnav li a") .mouseover(function() { //When trigger is clicked...
        //Drop down the subnav on click
        $(this).parent().find("ul.subnav").slideDown('fast');
        $(this).parent().parent("span").hover(function() {
            //do nothing since we are already hovering over this span and menu should be dropped
        }, function(){
            //if we leave the span, slideUp the menu
            $(this).parent().find("ul.subnav").slideUp('medium');
        });
    });
    $("ul.subnav").slideUp('medium'); // <-- Note here, but you probably want to hide or something
});

http://jsfiddle.net/SvDAw/

注意，这是在 FF4 中。

注意

我没有评论 UL 中 SPAN 的不正确使用；正如其他注意事项，这可能不是一件好事，因为它无效（您应该在 UL/OL 中使用 LI 和 OL/UL）。因此，您可以考虑重新排序您的标记，以便在每个级别的 LI 上使用类，或者在您的父 UL 中嵌入一些 UL（我更喜欢第一个）。

【讨论】：