Jquery 使用除法的滑动菜单_Jquery_Css

Jquery 使用除法的滑动菜单

jquery css

Jquery 使用除法的滑动菜单,jquery,css,Jquery,Css,创建了一个滑动菜单。问题是它不能正常工作。它在不断地向下和向上滑动…为了便于理解，我对某些部分进行了评论 <!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> <s

创建了一个滑动菜单。问题是它不能正常工作。它在不断地向下和向上滑动…为了便于理解，我对某些部分进行了评论

<!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>


$（函数（）{
$（“#home”）.mouseover（函数（）{
如果（$（“#幻灯片_home”）是（“：隐藏”））{
$（“#幻灯片_home”）。幻灯片向下（“正常”）}
});
$（“#幻灯片_home”）.mouseover（函数（）{
如果（$（“#幻灯片_home”）是（“：隐藏”））{
$（“#幻灯片_home”）.show（）；}
});
$（“#home”）.mouseout（函数（）{
如果（！$（“#幻灯片_home”）是（“：隐藏”））{
$（“幻灯片主页”）.slideUp（“正常”）}
});
$（“#javascript”）.mouseover（函数（）{
如果（$（“#幻灯片”）是（“：隐藏”））{
$（“#slide_javascript”）.slideDown（“正常”）}
});
$（“#javascript”）.mouseout（函数（）{
$（“#slide_javascript”）.slideUp（“正常”）；
});
});
#梅努巴{
宽度：1130px；
高度：35px；
背景颜色：蓝色；
边框：黑色；
左边距：60像素；
填充：10px 0px 0px 0px；
}
.内部{
宽度：100px；
浮动：左；
颜色：白色；
高度：35px；
左侧填充：75px；
}
.幻灯片{
宽度：96px；
高度：150像素；
边框：2件纯蓝；
背景颜色：粉红色；
对齐：居中；
显示：无；
}
#名单{
宽度：92px；
高度：26px；
颜色：红色；
边框：2倍纯黄色；
}   
#外部连接{
宽度：1130px；
高度：550px；
背景颜色：黄色；
边框：黑色；
左边距：60像素；
填充：10px 0px 0px 0px；
}
家
JAVASCRIPT

首先，它应该是与

ul

，

li

相同嵌套的标记。你可以找到很多经过良好测试和完善的菜单插件。以下是它们的小列表：

如果你看一下，你会发现使用mouseenter和mouseleave可以为你解决问题。

请使用，而不要使用wc。给你。此外，我还为您创建了一个包含上述内容的应用程序，以便人们能够更轻松地看到问题并解决问题。