老师，请问这个jquery的部分为什么二级菜单出不来

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<div class="logo">青海省网上预约挂号平台</div>

</nav>

</div>

</div>

</header>

</div>

</div>

</div>

</div>

</div>

<a href="">皮肤性病科</a>

</div>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

<p>内科常见病</p>

</div>

<p>神经内科常见病</p>

<a href="#">脑血栓形成</a>

</div>

<p>内分泌科常见病</p>

</div>

<p>风湿免疫科常见病</p>

<a href="#">强直性脊柱炎</a>

<a href="#">类风湿性关节炎</a>

<a href="#">系统性红斑狼疮</a>

</div>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</body>

</html>

padding: 0;

margin:0;

}

text-decoration: none;

color: #000;

/*border: 1px solid black;*/

}

body{

background-color: #eee;

}

.top{

height: 50px;

width: 100%;

background-color: #eee;

}

.nav{

width: 1200px;

margin:0 auto;

/*border:1px solid red;*/

position: relative;

}

.nav .doctor{

display: inline-block;

width: 200px;

height: 50px;

background: url(../img/医生.png) no-repeat 0px ;

background-size: 30px 30px;

/*border:1px solid red;*/

text-indent: 30px;

line-height: 50px;

}

a:hover{

color: blue;

}

.logo{

width: 250px;

height: 50px;

line-height: 50px;

background-color: #092b78;

position: absolute;

right: 0;

top: 0;

color: #fff;

text-align: center;

box-shadow: 5px 5px 5px #092b78;

border-radius: 10px;

}

.header{

width: 1200px;

margin: 0 auto;

background-color: #eee;

position: relative;

/*border:1px solid red;*/

}

.find{

width: 500px;

position: absolute;

left:50%;

margin-left: -250px;

}

.find_icon{

width: 30px;

height: 30px;

display: inline-block;

background:url(../img/搜索.png) no-repeat;

background-size: 30px;

background-color:#eee;

border:2px solid #092b78;

position: absolute;

border-right: none;

left: -30px;

/*top:5px;*/

}

.find_inp{

width: 400px;

height: 30px;

background-color: transparent;

border:2px solid #092b78;

outline: none;

}

.find_result{

display: inline-block;

width: 50px;

height: 34px;

background-color: #092b78;

position: absolute;

line-height: 34px;

border-radius: 0 5px 5px 0;

color: #fff;

text-align:center;

}

.banner{

/*border:1px solid red;*/

width: 1200px;

height: 100%;

margin:0 auto;

margin-top: 70px;

}

.banner_content{

width: 800px;

margin:0 auto;

/*border:1px solid black;*/

position: relative;

}

#content_1{

width: 600px;

height: 294px;

/*border:2px solid red;*/

background: url(../img/医院.png);

background-size: 600px 294px;

position: absolute;

left:200px;

top:0;

}

#content_2{

width: 600px;

height: 294px;

/*border:2px solid red;*/

background: url(../img/西宁第一人民医院.png);

background-size: 600px 294px;

position: absolute;

left:200px;

top:0;

}

#content_3{

width: 600px;

height: 294px;

/*border:2px solid red;*/

background: url(../img/青海医院.jpg);

background-size: 600px 294px;

position: absolute;

left:200px;

top:0px;

}

.banner_side{

width: 200px;

height: 294px;

/*border:1px solid red;*/

background-color:#092b78;

position: relative;

float: left;

}

.banner_side_content{

position: absolute;

top:0;

left:0;

width: 200px;

height: 294px;

/*border:1px solid red;*/

}

.banner_side_content .item{

width: 200px;

height: 42px;

/*border:1px solid red;*/

/* margin-left: 30px;

margin-top: 10px;*/

text-align: center;

/*padding:1px 0;*/

}

.banner_side_content .item:hover{

cursor: pointer;

}

.banner_side_content .item a{

color: #fff;

/*border:1px solid yellow;*/

border-bottom: 1px solid gray;

display: inline-block;

height: 42px;

width:130px;

line-height: 42px;

}

.banner_side_content .item a:last-child{

border:none;

}

.banner_side_content .item span{

color: #fff;

position: absolute;

right: 33px;

height: 42px;

line-height: 42px;

}

.banner_center{

width: 400px;

height: 300px;

background: #fff;

position: absolute;

left:200px;

top: 0;

z-index:999;

display: none;

}

.banner_center_item{

border-bottom: 1px solid #eee;

margin-top: 10px;

margin-left: 20px;

padding-bottom: 10px;

/*border:1px solid red;*/

}

.banner_center_item p{

color: blue;

margin-bottom: 5px;

font-size: 16px;

}

.banner_center_item a{

font-size: 10px;

}

.banner_center_item span{

margin: 0 5px;

color: gray;

}

.pit{

position: relative;

/*border:1px solid yellow;*/

height: 294px;

width: 600px;

padding-left: 200px;

}

.btn{

display: inline-block;

width: 30px;

height: 60px;

background: url(../img/arrow.png) center center no-repeat;

/*background-color: black;*/

position: absolute;

top:50%;

margin-top: -30px;

transform:rotate(180deg);

}

.next{

transform:rotate(0deg);

right:0;

}

.btn:hover{

background-color: #333;

opacity: 0.8;

filter:alpha(opacity=80);

}

.dots{

width: 80px;

height: 30px;

position: absolute;

bottom: 0px;

right: 0px;

/*border:1px solid red;*/

}

.dots span{

display: inline-block;

border:1px solid white;

width: 10px;

height: 10px;

border-radius: 50%;

margin-left: 8px;

background-color: rgba(7, 17, 27, 0.4);

cursor: pointer;

box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset;

}

.dots span.active{

box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.4) inset;

background-color: #fff;

}

$(document).ready(function(){

$('.item').mouseenter(function(){

$('.banner_center').eq($(this).index()).css('display','block');

$(this).css({"background-color":"#fff"})

.siblings().css({'background-color':'#092b78'});

$(this).children().css('color','blue').parent().siblings().children().css('color','#fff');

});

$('.item').mouseleave(function(){

$('.banner_center').eq($(this).index()).css('display','none');

// $(this).css('background-color','blue');

// $('.item a').css('color','white');

});

var index=0,

time=null,

oprve=byId('prve'),

onext=byId('next'),

opictures=byId('pit').getElementsByClassName('pictures'),

odots=byId('dots').getElementsByTagName('span'),

opit=byId('pit'),

size=opictures.length;

// alert(opit.innerHTML);

function byId(id){

return typeof(id)==="string"?document.getElementById(id):id;

}

//封装兼容性的DOM2级事件

function addHandler(element, type, handler) {

if (element.addEventListener) {

element.addEventListener(type, handler, true);

}

else if (element.attachEvent) {

element.attachEvent('on' + type, handler);

}

else {

element['on' + type] = handler;

}

function changeImg(){

for(var i=0;i<size;i++){

odots[i].className="";

opictures[i].style.display='none';

}

opictures[index].style.display='block';

odots[index].className='active';

}

addHandler(onext,'click',function(){

index++;

if(index>=size) index=0;

changeImg();

})

addHandler(oprve,'click',function(){

index--;

if(index<0) index=size-1;

changeImg();

})

//点击导航切换

for(var i=0;i<size;i++){

odots[i].id=i;

addHandler(odots[i],'click',function(){

index = this.id;

changeImg();

});

}

//自动播放

function start(){

time=setInterval(function(){

index++;

if(index>=size) {index=0;}

changeImg();

},1000)

}

function stop(){

if(time){

clearInterval(time);

}

start();

addHandler(opit,"mouseover",stop);

addHandler(opit,"mouseout",start);

});

qq_慕标2503495 2020-05-31

源自：项目：JS实现轮播图特效 3-8 项目作业

收起

2回答

好帮手慕夭夭回答被采纳获得+3积分 2020-06-01 09:46:20

同学你好，这是因为相对定位不会脱离文档流，y原位置会为它保留。且设置的padding-left也包含在盒子的实际宽度中。一级菜单被div#pit挡住了，鼠标无法移入一级菜单，所以二级菜单自然也就无法显示了。

这里使用绝对定位，使用left移动元素的位置。这样不会把一级菜单挡住了。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

收起回答

qq_慕标2503495 提问者 #1

老师，再麻烦问一下我的鼠标不能悬停在二级菜单上怎么处理

2020-06-01 11:18:24

好帮手慕夭夭 2020-06-01 13:58:31

同学你好，因为二级菜单的显示隐藏效果是放在了一级菜单的移入和离开事件中，当移入二级菜单时，就触发了一级菜单的离开事件，二级菜单就隐藏了。

这里老师给你一个思路，自己调整一下：

1.把一级菜单与它对应的二级菜单包含在同一个div中。

2.一级菜单的事件去掉，改为给它的父元素div绑定mouseenter，mouseleave。这样移入一级菜单和二级菜单，都是在父元素区域内，不会触发父元素的离开事件，二级菜单也就不会隐藏了。

祝学习愉快~

收起回答

相似问题

请问老师二级菜单怎么循环5次

二级菜单

请问为什么移入二级菜单还是没显示出来。

老师，为什么三级栏目不设置position的时候会与二级栏重叠呢，高度设置的不是auto吗

顶部右侧下拉菜单不知道怎么实现二级菜单与相对应一级菜单在同一边框的效果

登录后可查看更多问答，登录/注册

1.前端零基础入门

参与学习人
提交作业 8403 份
解答问题 40143 个

本阶段为你揭开日常所见网页的神秘面纱，炫酷的动效并不难得，带你从基础知识到静态网页布局，再到用JS实现动态网页开发，轻松迈入前端开发的大门。

了解课程

本课精华内容

问答作业

关于浏览器兼容性代码疑问

16 1

请老师检查

65 3

没有明白，为什么height是90，padding-top为60。它就居中了？

26 3

关于三种常用的清除浮动方法的优劣对比，请老师简单讲一讲

18 1

进击的小白们加油。分享一下我做最后这个项目作业的感受

188 1

查看更多本课问答

请稍等 ...

老师，请问这个jquery的部分为什么二级菜单出不来

老师，请问这个jquery的部分为什么二级菜单出不来

正在回答

请选择置顶位置