为什么这个jquery下拉列表不起作用?

时间:2014-03-30 19:16:41

标签: javascript jquery html css

此代码似乎正确显示所有内容,但是当在浏览器中启动时,下拉列表不起作用。悬停样式和一切正常工作,除了下拉列表。 谢谢。

HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GS4 Concept Home Page</title>
<link type="text/css" href="unicss.css" rel="stylesheet"/>
<script src="Script/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
</head>

<body>
    <div id="header">
    <div class="nav">
        <ul class="navigation">
                <li><a href="#">Main Cat 1</a></li>
                <li><a href="#">Main Cat 2 </a></li>
            <ul>
                <li><a href="#">Sub Cat 2-1</a></li>
                <li><a href="#">Sub Cat 2-2</a></li>
                <li><a href="#">Sub Cat 2-3</a></li>
                <li><a href="#">Sub Cat 2-4</a></li>
                <li><a href="#">Sub Cat 2-5</a></li>
            </ul>
                <li><a href="#">Main Cat 3 </a></li>
            <ul>
                <li><a href="#">Sub Cat 3-1</a></li>
                <li><a href="#">Sub Cat 3-2</a></li>
                <li><a href="#">Sub Cat 3-3</a></li>
                <li><a href="#">Sub Cat 3-4</a></li>
                <li><a href="#">Sub Cat 3-5</a></li>
                <li><a href="#">Sub Cat 3-6</a></li>
                <li><a href="#">Sub Cat 3-7</a></li>
            </ul>
      </ul>
    </div>
</div>
    <div id="container">
    </div>

</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */
body{
    background-image:url(Images/backgroundmain.jpg);
    min-width:100%;
    font-family: Arial, Helvetica,sans-serif;
    font-size:15px;
}

#header{
    background-color:#474747;
    width:100%;
    display:block;
}

#container{
    margin:auto;
    width:70%;
}

.navigation {
    margin:0;
    padding:0;
    list-style:none;
}

.navigation li {
    float:left;
    width:150px;
    position:relative;
}

.navigation li a {
    background:#262626;
    color:#fff;
    display:block;
    padding:8px 7px 8px 7px;
    text-decoration:none;
    border-top:1px solid #F2861D;
    text-align:center;
    text-transform:uppercase;
}
.navigation li a:hover {
    color:#F2861D;
}

.navigation ul {
    position:absolute;
    left:0;
    display:none;
    margin:0 0 0 -1px;
    padding:0;
    list-style:none;
    border-bottom:3px solid #F2861D;
}

.navigation ul li {
    width:150px;
    float:left;
    border-top:none;
}

.navigation ul a {
    display:block;
    height:15px;
    padding:8px 7px 13px 7px;
    color:#fff;
    text-decoration:none;
    border-top:none;
    border-bottom:1px dashed #6B6B6B;
}

.navigation ul a:hover {
    color:#F2861D;
}

JavaScript的:

$(document).ready(function() {
    $('.navigation li').hover(

    function() {
        $('ul', this).fadeIn();
    }, function() {
        $('ul', this).fadeOut();
    });
});

2 个答案:

答案 0 :(得分:3)

您的脚本顺序错误。

而不是

<script src="Script/main.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>

试试这个:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script src="Script/main.js"></script>

并且还创建一个嵌套列表,以便你的选择器在main.js文件中是正确的:

<ul class="navigation">
   <li><a href="#">Main Cat 1</a></li>
   <li><a href="#">Main Cat 2 </a>
       <ul>
           <li><a href="#">Sub Cat 2-1</a></li>
           <li><a href="#">Sub Cat 2-2</a></li>
           <li><a href="#">Sub Cat 2-3</a></li>
           <li><a href="#">Sub Cat 2-4</a></li>
           <li><a href="#">Sub Cat 2-5</a></li>
       </ul>
   </li>
   <li><a href="#">Main Cat 3 </a>
       <ul>
           <li><a href="#">Sub Cat 3-1</a></li>
           <li><a href="#">Sub Cat 3-2</a></li>
           <li><a href="#">Sub Cat 3-3</a></li>
           <li><a href="#">Sub Cat 3-4</a></li>
           <li><a href="#">Sub Cat 3-5</a></li>
           <li><a href="#">Sub Cat 3-6</a></li>
           <li><a href="#">Sub Cat 3-7</a></li>
       </ul>
   </li>
</ul>

答案 1 :(得分:0)

使用&#34;#&#34;时可能会出现问题作为href值。