向下滑动切换的jQuery延迟和没有向上滑动？

Question

Im making progress i think, I have a small pause on the second level of my menu before it slides down and i can't figure why also the is no slideup I thought this would happen with toggle here is my code in a better format i hope 我正在取得进展，我认为，我在菜单的第二级上稍稍停顿了一下，然后才滑下来，我想不起来为什么也没有滑下。我以为这会发生在这里。希望

First the HTML 首先是HTML

<!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>
</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>

Next The CSS 下一步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;}

/*Am I Overwriting the jquery??*/
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>

Finally the JQuery 最后的jQuery

<script type="text/javascript">
$(document).ready(function(){
$('#nav ul li').hover(function(){
         $('ul li', this).css("display", "none").toggle(300);
    });
 $('#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');
      });



});
</script>

Hope you guys canh help.. am i on the right track Im brand new to jquery 希望你们能帮到我..我在正确的轨道上吗？

Answer 1

See http://jsfiddle.net/efLuD/2/ 参见http://jsfiddle.net/efLuD/2/

Although I don't think you need to use jquery for this kind of animation. 虽然我认为您不需要将jquery用于此类动画。 If you can live with very old browsers not getting the animation, all modern browsers, eg Firefox, Chrome, IE9 supports CSS transitions. 如果您可以使用非常老的浏览器而不获取动画，则所有现代浏览器（例如Firefox，Chrome，IE9）都支持CSS过渡。

向下滑动切换的jQuery延迟和没有向上滑动？

问题描述

1 个解决方案

解决方案1
0 2012-07-11 04:19:56

向下滑动切换的jQuery延迟和没有向上滑动？

问题描述

1 个解决方案

解决方案1 0 2012-07-11 04:19:56

解决方案1
0 2012-07-11 04:19:56