Question

我正在取得进展我认为，我的菜单的第二级有一个小暂停，然后滑下来我无法理解为什么也没有滑动我认为这将发生在切换这里是我的代码在一个希望更好的格式

首先是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>

下一步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>

最后是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>

希望你们能帮助..我是在正确的轨道上我是jquery的新手

Answer 1

请参阅http://jsfiddle.net/efLuD/2/

虽然我认为你不需要在这种动画中使用jquery。如果您可以使用非旧版浏览器而无法获取动画，则可以使用所有现代浏览器，例如Firefox，Chrome，IE9支持CSS过渡。

在滑动切换时Jquery延迟并且没有向上滑动？

1 个答案: