Question

创建了一个滑动菜单。问题是它无法正常工作。它不断向下滑动......我已经评论了一些部分以便于理解......

<!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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#home").mouseover(function(){
        if ($("#slide_home").is(":hidden")) {
        $("#slide_home").slideDown("normal");}
        });
$("#slide_home").mouseover(function(){
        if ($("#slide_home").is(":hidden")) {
        $("#slide_home").show();}
        });

$("#home").mouseout(function(){

        if (!$("#slide_home").is(":hidden")) {
        $("#slide_home").slideUp("normal");}
        });


$("#javascript").mouseover(function(){
        if ($("#slide_javascript").is(":hidden")) {
        $("#slide_javascript").slideDown("normal");}
        });
$("#javascript").mouseout(function(){

        $("#slide_javascript").slideUp("normal");
        });


});
</script>
<style type="text/css">
#menubar{
width:1130px;
height:35px;
background-color:blue;
border:black;
margin-left:60px;
padding:10px 0px 0px 0px;

}
.inner{
width:100px;
float:left;
color:white;
height:35px;
padding-left: 75px;
}
.slide{
width:96px;
height:150px;
border:2px solid blue;
background-color:pink;  
align:center;
display:none;
}
#list{
width:92px;
height:26px;
color:red;
border:2px solid yellow;

}   
#conetent_outer{
width:1130px;
height:550px;
background-color:yellow;
border:black;
margin-left:60px;
padding:10px 0px 0px 0px;
}
</style>
</head>

<body>

<div id="menubar">
<div class="inner" align="center" id="home">HOME
    <div class="slide" id="slide_home" align="center">
    <a href="http://www.yahoo.com"><div id="list">think1</div></a>
    <a href="http://www.w3schools.com"><div id="list">think2</div></a>
    <a href="http://www.w3schools.com"><div id="list">think3</div></a>
    <a href="http://www.w3schools.com"><div id="list">think4</div></a>
    <a href="http://www.w3schools.com"><div id="list">think5</div></a>
    </div>
</div>

<div class="inner" align="center" id="javascript">JAVASCRIPT
    <div class="slide" id="slide_javascript" align="center">
    <a href="http://www.yahoo.com"><div id="list">think1</div></a>
    <a href="http://www.w3schools.com"><div id="list">think2</div></a>
    <a href="http://www.w3schools.com"><div id="list">think3</div></a>
    <a href="http://www.w3schools.com"><div id="list">think4</div></a>
    <a href="http://www.w3schools.com"><div id="list">think5</div></a>
    </div>
</div>

<!--<div class="inner" align="center" id="jquery">JQUERY
    <div class="slide" id="slide_jquery" align="center">
    <a href="http://www.yahoo.com"><div id="list">think1</div></a>
    <a href="http://www.w3schools.com"><div id="list">think2</div></a>
    <a href="http://www.w3schools.com"><div id="list">think3</div></a>
    <a href="http://www.w3schools.com"><div id="list">think4</div></a>
    <a href="http://www.w3schools.com"><div id="list">think5</div></a>
    </div>
</div>

<div class="inner" align="center" id="prototype">PROTOTYPE
    <div class="slide" id="slide_prototype" align="center">
    <a href="http://www.yahoo.com"><div id="list">think1</div></a>
    <a href="http://www.w3schools.com"><div id="list">think2</div></a>
    <a href="http://www.w3schools.com"><div id="list">think3</div></a>
    <a href="http://www.w3schools.com"><div id="list">think4</div></a>
    <a href="http://www.w3schools.com"><div id="list">think5</div></a>
    </div>
</div>

<div class="inner" align="center" id="dotnet">DOT NET
    <div class="slide" id="slide_dotnet" align="center">
    <a href="http://www.yahoo.com"><div id="list">think1</div></a>
    <a href="http://www.w3schools.com"><div id="list">think2</div></a>
    <a href="http://www.w3schools.com"><div id="list">think3</div></a>
    <a href="http://www.w3schools.com"><div id="list">think4</div></a>
    <a href="http://www.w3schools.com"><div id="list">think5</div></a>
    </div>
</div>

<div class="inner" align="center" id="forums">FORUMS
    <div class="slide" id="slide_forums" align="center">
    <a href="http://www.yahoo.com"><div id="list">think1</div></a>
    <a href="http://www.w3schools.com"><div id="list">think2</div></a>
    <a href="http://www.w3schools.com"><div id="list">think3</div></a>
    <a href="http://www.w3schools.com"><div id="list">think4</div></a>
    <a href="http://www.w3schools.com"><div id="list">think5</div></a>
    </div>
</div>-->
</div>

<div id="conetent_outer">
</div>
</body>
</html>

Answer 1

首先，它应该与ul，li标记相同的嵌套。这是一个很好的测试和抛光菜单插件，你可以找到。这是小清单：

38 jQuery And CSS Drop Down Multi Level Menu Solutions

15 Really Amazing jQuery Navigation Menu – Tutorials & Scripts

Answer 2

如果您查看http://jsfiddle.net/bhofmann/Skt2a/1/，您会看到使用mouseenter和mouseleave为您解决了这个问题。

使用分区滑动菜单

2 个答案: