Question

我正在编写一个多级下拉菜单，当父项悬停时，子菜单会随着JQuery fadeIn()而下降。但效果正在传播到子元素。他们在徘徊时也有fadeIn()。代码是

HTML

<nav>
<ul id="headnav">
    <li> <a class="sliding-middle-out" href="index.php"> ABOUT </a> </li>
    <li> <a class="sliding-middle-out" href="practice.php"> PRACTICE </a> </li>
    <li> <a class="sliding-middle-out" href="research.php"> RESEARCH </a> 
        <ul>
            <li> <a href="papers.php"> Papers </a> </li>
            <li> <a href="articles.php"> Articles </a> </li>
            <li> <a href="phdstudents.php"> PhD Students </a> </li>
            <li> <a href="presentations.php"> Presentations </a> </li>
        </ul>
    </li>
</ul>
</nav>

JQuery

$(document).ready(function() { 
    $('nav > ul > li > ul').hide();
    $('nav > ul > li').hover(function() {
        $(this).find('ul').fadeIn(400);
    },function() {
        $(this).find('ul').fadeOut(400);
    }); 

});

CSS

nav {
    position: absolute;
    min-width:30%;
    float:right;
    right:12%;
    top: 16%;
  }

  nav ul li {
    display: inline-block;
    min-width: 20px;
    text-transform: uppercase;
  }

  nav ul li a{
    float: left;
    padding: 0px 10px 0px 10px;
  }

  nav ul li ul {
    display: inline-block;
    position: absolute;
    width: auto;
    margin-left:-35%;
    margin-top:7%;
  }

  nav ul li ul li {
    display: inline-block;
    min-width:10px;
  }

  nav ul li ul li a {
    color:#7f8c8d;
  }

当您将鼠标悬停在子元素上时，它们会再次fadeIn()。我尝试了e.stopPropagation()和e.preventDefault()，但没有一个正在运作。

请帮忙

Answer 1

显示悬停在外部li上的子菜单，但在离开内部ul时将其隐藏：

$('nav > ul > li').mouseenter(function(e) {
    $(this).find('ul').fadeIn(400);
});
$('nav > ul > li > ul').mouseleave(function() {
    $(this).fadeOut(400);
});

http://jsfiddle.net/mava7btt/3/

StopPropagation（）不起作用

1 个答案: