Question

我遇到的问题让我发疯。我有一个导航栏，在下拉菜单中使用jquery，在某些类别中使用第二个子下拉菜单。出于某种原因，在您点击导航片段一段时间后，“sub subs”停止工作。以下是我的代码。请记住，它是一个精简版（当然没有化妆品），我从我的网站上提取仅仅是为了测试，但这个问题仍然发生在这个问题上。问题特别针对类别2子 1和类别3子2 它会工作几次，然后在您点击其他链接并返回后停止工作。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>

        <![endif]-->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<style type="text/css">
body {
margin:0;
}
.nav {
position:absolute;
background-color: #E4E4E4;
width: 100%;
left: 0px;
z-index: 999;
height: 50px;
}
.menu-main {
margin-left:15px;
}
.menu-main > li {
position:relative;
float:left;
padding-top: 7px;
padding-right: 37px;
padding-bottom: 7px;
padding-left: 29px;
height: 36px;
line-height: 36px;
text-align: center;
}
.menu-main .fix {
line-height: 18px;
z-index: 999;
}
.menu-main a {
font-size:13px;
color:#000;
}
.menu-main a:hover {
text-decoration:none;
}
.menu-main > li > a {
}
.menu-main > li.active > a, .menu-main li.hover > a {
color:#427D8B;
}
.menu-main .sub-menu {
display:none;
position:absolute;
padding:10px 0;
width:180px;
-moz-box-shadow: 1px 1px 2px #aaa;
-webkit-box-shadow: 1px 1px 2px #aaa;
box-shadow: 1px 1px 2px #aaa;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
border:1px solid #ddd;
background:#fff;
}
.menu-main .sub-menu li {
position:relative;
padding:8px 15px;
z-index:999;
}
.menu-main > li > .sub-menu {
left:0;
top:40px;
z-index:999;
}
.menu-main > li li > .sub-menu {
left:180px;
top:0;
z-index:999;
}
</style>
<script>
    $(document).ready(function() {
        $('.menu-main li').hover(function() {
            $(this).addClass('hover');
            $(this).children('.sub-menu').slideDown(100);
        },function() {
            $(this).removeClass('hover');
            $(this).children('.sub-menu').stop().slideUp(100);
        });
    });
</script>
</head>

<body>
<div class="nav">
<ul class="menu-main">
<li><a href="#">Home</a></li>
<li class="fix"><a href="#">Category <br />
One</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a></li>
<li><a href="#">Sub 3</a></li>
<li><a href="#">Sub 4</a></li>
</ul>
</li>
<li class="fix"><a href="#">Category<br /> 
Two
</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a>
<ul class="sub-menu">
<li><a href="#">Sub A</a></li>
<li><a href="#">Sub B</a></li>
<li><a href="#">Sub C</a></li>
<li><a href="#">Sub D</a></li>
<li><a href="#">Sub E</a></li>
</ul>
</li>
</ul>
</li>
<li class="fix"><a href="#">Category <br /> 
Three
</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
<li><a href="#">Sub 2</a>
<ul class="sub-menu">
<li><a href="#">Sub A</a></li>
<li><a href="#">Sub B</a></li>
<li><a href="#">Sub C</a></li>
</ul>
</li>
</ul>
</li>
<li class="fix"><a href="#">Category <br /> 
Four
</a>
<ul class="sub-menu">
<li><a href="#">Sub 1</a></li>
</ul>
</li>
<li><a href="#">Category Five</a></li>
<li><a href="#">Category Siz</a></li>
</ul>
</div>
</body>
</html>

导航中的Jquery第二个子下拉列表在几次使用后停止工作

0 个答案: