jquery - 滑块不会后退

Question

我怀疑我的 jQuery 脚本出了点问题，但与示例相比，似乎无法追踪出了什么问题。你在 jQuery 调用中看到了什么可疑的地方吗？

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<style>
#menu{
    height: 30px;
    background-color: #f90;
}

#menu li li:hover{
background-color: yellow;
cursor: pointer;
}

#menu ul, #menu li{
list-style-type:none;
padding:0;
margin:0;
}

#menu li{
float:left;
width:120px;
list-style-type:none;
line-height:30px;
text-align:center;
}

#menu li ul{
position:absolute;
background-color:#f90;
display:none;
}

#menu li li{
float:none;
padding:2px;
}

#menu a{
color:#000;
text-decoration:none;
}
</style>
<script type="text/javascript">
    $(document).ready(function(){
        $("#menu li").hover(function(){
            $(this).children(":hidden").slideDown();
        });
    },function(){
        $(this).parent().find("ul").slideUp();
    });
</script>
</head>

<body>
<div id="menu">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Info</a>
        <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
        </ul>
    </li>
    <li><a href="#">Portfolio</a>
        <ul>
            <li><a href="#">Submenu1</a></li>
            <li><a href="#">Submenu2</a></li>
            <li><a href="#">Submenu3</a></li>
        </ul>
    </li>
</ul>
</div>
</body>
</html>

score 3 · Accepted Answer

工作演示 http://jsfiddle.net/bncSS/9/

你有额外的});错误

代码

 $(document).ready(function(){
        $("#menu li").hover(function(){
            $(this).children(":hidden").slideDown();

    },function(){
        $(this).parent().find("ul").slideUp();
    });
  });

score 0 · Accepted Answer

是的，jQuery 应该是：

<script type="text/javascript">
    $(document).ready(function(){
        $("#menu li").hover(
        function(){
            $(this).children(":hidden").slideDown();
        },
        function(){
            $(this).parent().find("ul").slideUp();
        });
    });
</script>

jsfiddle

score 0 · Accepted Answer

<html>
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"
    type="text/javascript"></script>
<style>
#menu {
    height: 30px;
    background-color: #f90;
}

#menu li li:hover {
    background-color: yellow;
    cursor: pointer;
}

#menu ul,#menu li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#menu li {
    float: left;
    width: 120px;
    list-style-type: none;
    line-height: 30px;
    text-align: center;
}

#menu li ul {
    position: absolute;
    background-color: #f90;
    display: none;
}

#menu li li {
    float: none;
    padding: 2px;
}

#menu a {
    color: #000;
    text-decoration: none;
}
</style>
<script type="text/javascript">
    $(document).ready(function() {
        $("#menu li").hover(function() {
            $(this).parent().find("ul").slideUp();
            $(this).children(":hidden").slideDown();
        });
    });
</script>
</head>
<body>
    <div id="menu">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Info</a>
                <ul>
                    <li><a href="#">Submenu1</a>
                    </li>
                    <li><a href="#">Submenu2</a>
                    </li>
                    <li><a href="#">Submenu3</a>
                    </li>
                </ul></li>
            <li><a href="#">Portfolio</a>
                <ul>
                    <li><a href="#">Submenu1</a>
                    </li>
                    <li><a href="#">Submenu2</a>
                    </li>
                    <li><a href="#">Submenu3</a>
                    </li>
                </ul></li>
        </ul>
    </div>
</body>
</html>

jquery - 滑块不会后退

3 回答 3

Related

Reference