jquery悬停找不到父跨度

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

这里有一些问题。

1. 不要输入 <li>在 <span> 。它破坏了 html 验证规则并可能导致问题。

2. 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');
        });
    });
});

这应该更适合你。