Question

大家好，我正在为我的网站建立一个下拉菜单，我想使用jquery它的工作方式我想要它，但是。我继续在第二个ul上获得快门效果而对第一级没有任何影响..我知道我很接近并且遗漏了一些明显的东西。我在此帖子的同一页面中包含了菜单的所有css

这是

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('ul#nav li').hover(function() { //When trigger is clicked...
    var me = this;
    //Following events are applied to the subnav itself (moving subnav up and down)
    $(me).find('ul.subnav').slideDown('slow').show(); //Drop down the subnav on click
    $(me).click(function() {
    }, function(){
        $(me).find('ul.subnav').slideUp('slow'); //When the mouse hovers out of the subnav, move it back up
    });
});
 $('#nav ul ul li:has(ul)').addClass("parent");
      $('#nav ul ul li:has(ul)').hover(function(){
          $(this).addClass('hoverParent');
           $('ul li', this).toggle("fast");
      },function(){
          $(this).removeClass('hoverParent');

      });
});
</script>
<!--<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css"/>-->

<style>
    * {
        padding: 0px;
        margin: 0px;
}
  #nav {
    width: 960px;
    height: 30px;
    background-color: #333333;
}

ul.nav {
    margin-left: 0px;
    padding-left: 0px;
    list-style: none;
    overflow: visible;
}
ul.nav li {
    float: left;
    position: relative;

}
ul.nav a {
    width: 8em;
    display: block;
    padding: 5px;
    text-decoration:none;
    color: #FFF;
    text-align: center;
}
ul.nav li a:hover {

    color: #33ff66;
}
.parent {
    background-image: url("images/arrow-select.png");
    background-repeat: no-repeat;
    background-position: right center;
}.parent2 {
   background-image: url("images/arrow-select.png");
    background-repeat: no-repeat;
    background-position: right center;
}
.hoverParent {
    background-image: url("images/arrow.png");
    background-repeat: no-repeat;
    background-position: right center;
}
div#nav ul ul li {
text-decoration: none;
color: white;
text-align: center;
background-color: #333333;
border: 1px solid #666  ;
border-top-color: #999999;
list-style: none;
}
div#nav ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}
div#nav ul ul {
    position: absolute;
    z-index: 500;
}
div#nav ul ul {display: none;}
div#nav ul li:hover ul{display: block;}
div#nav ul ul,
div#nav ul li:hover ul ul,
div#nav ul ul li:hover ul ul
{display: none;}

div#nav ul li:hover ul,
div#nav ul ul li:hover ul,
div#nav ul ul ul li:hover ul
{
    display: block;
}
</style>
</head>
<body>
<div id="nav">
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Surf Boards</a>
        <ul class="subnav">
            <li ><a href="#">Long Boards</a>
                <ul class="subnav">
                    <li ><a href="#">Hard Boards</a></li>
                    <li><a href="#">Soft Boards</a></li>
                </ul>
            </li>
            <li><a href="#">Template 2</a></li>
            <li><a href="#">Template 3</a></li>
        </ul></li>
    <li><a href="reviews.html">Clothing</a>
                <ul class="subnav">
                    <li><a href="#">Shorts</a></li>
                    <li><a href="#">Shirts</a></li>
                    <li><a href="#">Hoodies</a></li>
                </ul>
    </li>
    <li><a href="reviews.html">Accessories</a>
            <ul class="subnav">
                <li><a href="#">Stickers</a></li>
                <li><a href="#">Board Combs</a></li>
                <li><a href="#">Leg Ropes</a></li>
            </ul>
    </li>
    <li><a href="reviews.html">Events</a>
        <ul class="subnav">
            <li><a href="#">ASAP</a></li>
            <li><a href="#">Indigenous</a></li>
            <li><a href="#">International</a></li>
        </ul>
    </li>
    <li><a href="reviews.html">Contact Us</a></li>
</ul>
</div>
</body>
</html>

Answer 1

问题是由您的CSS引起的。当您将父菜单项悬停时，它变为display: block，jquery代码将其切换回display: none。要通过jQuery修复它，请尝试这个 - http://jsfiddle.net/WRM9X/

$('#nav ul ul li:has(ul)').addClass("parent");
      $('#nav ul ul li:has(ul)').hover(function(){
          $(this).addClass('hoverParent');
          $('ul li', this).css("display", "none").toggle(300);
      },function() {
          $(this).removeClass('hoverParent');
      });
});

或者您可以通过CSS修复它，而不是在父级悬停上创建子菜单display: block

我的jquery下拉菜单很疯狂

1 个答案: