Javascript 滑动向下切换上的Jquery延迟和不向上滑动？_Javascript_Jquery

Javascript 滑动向下切换上的Jquery延迟和不向上滑动？

javascript jquery

Javascript 滑动向下切换上的Jquery延迟和不向上滑动？,javascript,jquery,Javascript,Jquery,我在进步，我想，我在我的菜单的第二级上有一个小的停顿，在它滑下来之前，我不明白为什么也没有幻灯片，我想这会发生在切换这里是我的代码在一个更好的格式，我希望首先是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" l

我在进步，我想，我在我的菜单的第二级上有一个小的停顿，在它滑下来之前，我不明白为什么也没有幻灯片，我想这会发生在切换这里是我的代码在一个更好的格式，我希望

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


* {
填充：0px；
边际：0px；
}
#导航{
宽度：960px；
高度：30px；
背景色：#333333；
}
ul导航{
左边距：0px；
左侧填充：0px；
列表样式：无；
溢出：可见；
}
李国宝{
浮动：左；
位置：相对位置；
}
导航a{
宽度：8em；
显示：块；
填充物：5px；
文字装饰：无；
颜色：#FFF；
文本对齐：居中；
}
ul.nav李娜：悬停{
颜色：#33ff66；
}
.家长{
背景图像：url（“images/arrow select.png”）；
背景重复：无重复；
背景位置：右中；
}.父母2{
背景图像：url（“images/arrow select.png”）；
背景重复：无重复；
背景位置：右中；
}
.父母{
背景图片：url（“images/arrow.png”）；
背景重复：无重复；
背景位置：右中；
}
海军部{
文字装饰：无；
颜色：白色；
文本对齐：居中；
背景色：#333333；
边框：1px实心#666；
边框顶部颜色：#999999；
列表样式：无；
}
导航舱{
位置：绝对位置；
排名：0；
左：100%；
}
联邦航空航天部{
位置：绝对位置；
z指数：500；
}
div#nav ul ul{显示：无；}
/*我正在覆盖jquery吗*/
div#nav ul li:悬停ul{显示：块；}
海军航空分队，
驾驶员：悬停，
导航ul li:悬停ul
{显示：无；}
驾驶员：悬停，
导航ul li:悬停ul，
驾驶员：悬停
{
显示：块；
}

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


$（文档）.ready（函数（）{
$（'#nav ul li'）。悬停（函数（）{
$（'ulli'，this）.css（“显示”，“无”）.toggle（300）；
});
$（'nav ul li:has（ul）'）.addClass（“父级”）；
$（'#nav ul li:has（ul）'）。悬停（函数（）{
$（this.addClass（'hoverParent'）；
$（'ulli'，this）.css（“显示”，“无”）.toggle（300）；
}，函数（）{
$（this.removeClass（'hoverParent'）；
});
});

希望你们能帮忙。。我走对了吗我是jquery的新手参见

尽管我认为这种动画不需要使用jquery。如果您可以使用没有动画的非常旧的浏览器，那么所有现代浏览器，例如Firefox、Chrome、IE9都支持CSS转换。

与流行的观点相反，您实际上并没有在jQuery中编写这段代码——您使用的是Javascript，使用的是jQuery库，这是用Javascript.jsFiddle为您的问题编写的：plz-see-here看不到任何延迟：@Tats\u-inn您是否忘记包含jquery框架和

切换（300）仍然无法让它向上滑动，而不是消失