Question

我确信这已经被覆盖了，但是有很多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的情况下执行此操作。是的，它会更容易，但我从别人那里得到这个代码，我想保持相似。

Answer 1

这里有一些问题。

不要将<li>放入<span>。它会破坏html验证规则并导致问题。
幻灯片不起作用的原因是因为它在一个新函数中，意味着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');
        });
    });
});

这应该对你有用。

Answer 2

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

Answer 3

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

$(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（我更喜欢第一个）。

Answer 4

在这种情况下，$（this）.parent（）是li元素，$（this）.parent（）。parenT（）是ul class =“subnav”元素和$（this）.parent（）。 parent（）。parent（）是span标记。

jquery悬停无法找到父跨度

4 个答案: