老师，二级菜单问题

老师，二级菜单问题

老师，这个二级菜单问题,如图，当我鼠标移动到购物车图标的时候，显示二级菜单，可是当我鼠标往下滑动到导航区上面的时候，jquery的mouseout认为我已经离开了二级菜单，该如何解决这个问题？我用的是mouseover跟 mouseout

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<div id='outBox'>

<!--左浮动顶部盒子-->
<div class="top-left">
	<div class="topleft login" >亲,请登录</div>
	<div class="topleft register">免费注册</div>
	<div class="topleft ">手机逛慕淘</div>
</div>
<!--右浮动顶部盒子-->
<div class="top-right">
    <div class="topright">联系客服 <img src="素材/icon/21.png"><div class="display-none top-dispaly">消費者客服</div><div class="display-none top-dispaly">賣家客服</div></div>
    <div class="topright">卖家中心 <img src="素材/icon/21.png"><div class="display-none top-dispaly">免費開店</div><div class="display-none top-dispaly">已賣出的寶貝</div>
<div class="display-none top-dispaly">賣家服務市場</div><div class="display-none top-dispaly">賣家培訓中心</div>
<div class="display-none top-dispaly">體驗中心</div>
</div>
    <div class="topright">商品分类 </div>
    <div class="topright">收藏夹<img src="素材/icon/21.png"><div class="display-none top-dispaly">收藏的寶貝</div><div class="display-none top-dispaly">收藏的店鋪</div></div>
    <div class="topright ">我的慕淘<img src="素材/icon/21.png"><div class="display-none top-dispaly">已買到的寶貝</div><div class="display-none top-dispaly">我的足跡</div> </div>
</div>
<!--水平线-->
<hr class="clear" color='blue' />
<!--sreach-->

<div class="outsreach">
	
<div class="logo"><img src="素材/logo.png"></div>
<div class="car-sreach">
<img class="img-display1" src="素材/icon/26.png">
<img class="img-display2" src="素材/icon/25.png">
<span>&nbsp;购物车 | 0</span><img src="素材/icon/23.png"><img class="img-display2" src="素材/icon/22.png">
<div class="carSecondMenu">
   <div class="carTop">最新加入的商品</div>
   <div class="carCenter">
    <ul type="none">
	    <li><img src="素材/cart/1.png"><span class="sp1">adidas 阿迪達斯 訓練 男子</span><span>￥388*1</span></li>
	    <li><img src="素材/cart/2.png"><span class="sp1">玉兰油 多效维护</span><span>￥378*1</span></li>
	    <li><img src="素材/cart/3.png"><span class="sp1">Apple iPhone 7(A1600)</span><span>￥123*1</span></li>
	    <li><img src="素材/cart/4.png"><span class="sp1">adidas 飛利普條機</span><span>￥124*2</span></li>
	    <li><img src="素材/cart/5.png"><span class="sp1">羅技G29</span><span>￥98*1</span></li>
	    <li><img src="素材/cart/book.jpg"><span class="sp1">book書本</span><span>￥458*2</span></li>
    </ul>

   </div>
   <div class="carButton">共27件商品,共計￥0.00元<div id='goShop'>去购物</div></div>
</div>
</div>

<div class=sreach>
	<form><input class="input-1" type="text" name="" placeholder="灵魂美食一元抢"><input class="input-2" type="button" value="搜索"></form></div>
</div>

<!--sreach完成-->


</div><!--head last one close div-->
<div class="headClass">
	<div class="topClass">
		<ul type="none"><li>數碼城</li>
		<li>天黑黑</li>
		<li>團購</li>
		<li>發現</li>
		<li>二手特價</li>
		<li>名品匯</li></ul>

	</div>
    
</div>
<!--弹出层遮罩-->
<div class="layer-pop"></div>
<!--弹出层窗体-->
<div class="layer-pop-conten">
	<div class="layer-close">X</div>
	<span class="span">登录</span>
	<span class="span">注册</span>
	<form class="form">
<input class='write' type="text" name="" placeholder="请输入登录邮箱或手机号">
       <p class="name-wrong">账号错误,请重新输入</p>
<input class='write' type="password" name="" placeholder="请输入6位密码,区分大小写">
 <p class="password-wrong">密码错误,请重新输入</p>
<!--下次自动登录/忘记密码-->
<div class="repassword">
	<input type="checkbox" name="" class="checkbox"><span class="respan">下次自动登录</span>
	<span class="respan-2">忘记密码</span>
</div>
<input type="button" class="layer-login" value="登 录">

<div class="image">
	<img src="素材/icon/QQ.png">
<img class="img-center" src="素材/icon/weixin.png">
<img src="素材/icon/xinlang.png">
</div>
</form>
</div>
<!--完成 -->
<div class="layer-pop2"></div>
<div class="dis">
	<div class="layer-close2">X</div>
     <span class="span2">登录</span>
	<span class="span2">注册</span>
<input class='write2 write3' type="text" name="" placeholder="请输入登录邮箱或手机号">
<input class='write2' type="password" name="" placeholder="请输入6位密码,不区分大小写">
       
<input class='write2' type="password" name="" placeholder="请再次输入密码">
 <p class="password-wrong2"><br/>密码错误,请重新输入</p>
<input type="button" class="layer-login2" value="注 册">
</div>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html>

$(function(){
var passwordWrong=$('.password-wrong2');
var textes=$('.write2');
var button=$('.login');
var layerPop=$('.layer-pop');
var layerPopConten=$('.layer-pop-conten');
var layerClose=$('.layer-close');
var text=$('.write');
var wrongName=$('.name-wrong');
var wrongPassword=$('.password-wrong');
layer(button,layerPop,layerPopConten,layerClose);
var submit=$('.layer-login');
var layerClose2=$('.layer-close2');
var freeLogin=$('.register');
var dis=$('.dis');
var layerPop2=$('.layer-pop2');
var layerLogin2=$('.layer-login2');
var topright=$('.topright');
var carSreach=$('.car-sreach');

var carSecondMenu=$('.carSecondMenu');




































// 彈出窗函數調用
focuss(text,wrongPassword);
focus(text,wrongName);
 submitLogin(submit,text,button);
layery(freeLogin,dis,layerPop2,layerClose2);
testWrite(layerLogin2,textes,passwordWrong);
var spanone=$('.span2');
spans(spanone);
var spantwo=$('.span');
spanss(spantwo);
displayes(topright);
car(carSreach,carSecondMenu);


//car切換顏色
function car(carSreach,carSecondMenu){
carSreach.on('mouseover',function(){
carSreach.css({'background':'white','border':'1px rgba(0,0,0,0.2) solid','color':'black','cursor':'pointer'})
carSreach.children('img').eq(1).show();
carSreach.children('img').eq(0).hide();
carSreach.children('img').eq(2).hide();
carSreach.children('img').eq(3).show();
carSecondMenu.show();

})
carSreach.on('mouseout',function(){
carSreach.css({'background':'red','border':'','color':'white'})
carSreach.children('img').eq(0).show();
carSreach.children('img').eq(1).hide();
carSreach.children('img').eq(3).hide();
carSreach.children('img').eq(2).show();
carSecondMenu.hide();

})}
//二級菜單/右上角的;
function displayes(topright){

topright.on('mouseover',function(){

$(this).children('.display-none').css({'display':'block','border':'1px solid white'});

$(this).on('mouseout',function(){

$(this).children('.display-none').css({'display':'none'});
})

})
}
// 登錄註冊切換2個函數;
function spanss(spantwo)
{

spantwo.eq(1).on('click',function(){

	dis.addClass('display');
layerPop2.addClass('display');
layerPop.removeClass('display');
layerPopConten.removeClass('display');
})


}


function spans(spanone)
{

spanone.eq(0).on('click',function(){

	dis.removeClass('display');
layerPop2.removeClass('display');
layerPop.addClass('display');
layerPopConten.addClass('display');
})


}

//判斷註冊的val以及注冊;


function testWrite(layerLogin,textes,passwordWrong){
layerLogin.on('click',function(){

var text3=textes.eq(0).val();

var textone=textes.eq(1).val();
var texttwo=textes.eq(2).val();
if(textone==texttwo&&texttwo&&textone&&text3){
alert('注冊成功');
passwordWrong.removeClass('display');
dis.removeClass('display');
layerPop2.removeClass('display');

}
else{passwordWrong.addClass('display');}
})}

//註冊窗体跟窗口的显示和隐藏函数
function layery(freeLogin,dis,layerPop2,layerClose)
{

freeLogin.on('click',function(){
dis.addClass('display');
layerPop2.addClass('display');
layerClose.on('click',function(){

dis.removeClass('display');
layerPop2.removeClass('display');

})



})


}




// 校验密码跟账号是否一致函数,如果一致,关闭弹出框;

function submitLogin(submit,text,button)
{
  submit.on('click',function(){
if(text.eq(0).val()=='123456' && text.eq(1).val()=='123456' )
{alert('登录成功');
layerPop.removeClass('display');
layerPopConten.removeClass('display');
button.text('登录成功:高星星');
}
else{alert('请重新输入');
button.text('未登录成功');
}
  })
}





// 输入密码框失去焦点,显示文本函数

function focus(text,wrongName)
{
	text.eq(0).on('focusout',function(){
    if(text.eq(0).val()=="123456"){
wrongName.removeClass('display');
wrongName.css({'color':'red'})
    }
    else{
    	wrongName.addClass('display');
    	wrongName.css({'color':'red'})

    }
})}




// 输入号码框失去焦点,显示文本函数

function focuss(text,wrongPassword)
{
	text.eq(1).on('focusout',function(){
    if(text.eq(1).val()=="123456"){
wrongPassword.removeClass('display');
wrongPassword.css({'color':'red'})
    }
    else{
    	wrongPassword.addClass('display');
    	wrongPassword.css({'color':'red'})

    }
})}







// 窗体跟窗口的显示和隐藏函数
function layer(button,layerpop,layerPopConten,layerClose)

{
button.on('click',function(){
layerPop.addClass('display');
layerPopConten.addClass('display');
layerClose.on('click',function(){
layerPop.removeClass('display');
layerPopConten.removeClass('display');

})



})
	
}








})
*{margin: 0;padding: 0;}
#outBox{width: 70%;height: auto;background-color:;margin:0 auto;}
.topleft{float:left;margin:15px 0px 0px 15px;font-size: 10px;cursor:pointer;}
.topright{float:right;padding:30px 15px 0px 0px;font-size: 10px;height: 20px;line-height: 40px;position: relative;top:-20px;cursor:pointer;text-align: center;width: 80px;}
.login{color: red;}
.clear{clear:both;position: relative;top:10px;opacity: 0.5;margin-bottom: 30px}
.logo{float: left;margin-left: 30px;}
.outsreach{text-align: center;}
.sreach .input-1{width:50%;height: 30px;}
.sreach .input-2{width:5%;height: 35px;background-color: black;color:white;border:none;margin-top:10px;}
.car-sreach{float: right;background-color: red;width:140px;height:50px; text-align: center;line-height: 50px;color:white;z-index: 00}
.layer-pop{position: fixed;width: 100%;height: 100%;background-color:black;top:0;left: 0;opacity:0.5;z-index: 10;display: none;}
.layer-pop-conten{position: fixed;z-index: 11;top:0;bottom: 0;left: 0;right: 0;margin:auto;background-color: white;width: 500px;height: 500px;display: none;}
.layer-close{width: 40px;height: 40px;float: right;background-color: white;border-radius: 40px;margin-top:-20px;margin-right: -20px;text-align: center;line-height: 40px;cursor:pointer;}
.layer-close:hover{background-color:#bbb;}
.layer-pop-conten .span{float: left;margin-top:30px;margin-left: 40px;font-size:30px;}
.form{clear: both;width: 100%;text-align: center;line-height: 50px;margin-top:130px;}
.form .write{width: 250px;height: 40px;}
.repassword{width: 60%;margin-left: 20%;text-align: left;height:60px;line-height: 60px;}
.checkbox{float: left;margin-top:25px;}
.respan{font-size: 20px;float:left;}
.respan-2{font-size: 15px;float:right;}
.layer-login{width: 80%;background-color: red;height: 40px;border: none;border-radius: 10px;color:white;font-size:20px;cursor: pointer;}
.image{height: 50px;width:80%;margin-left: 10%;margin-top:10px;}
.image img{;width: 45px;background-color:#bbb;border-radius: 10px; }
.img-center{margin:0 40px 0 40px}
.name-wrong,.password-wrong,.password-wrong2{display:none;}
.layer-close2{width: 40px;height: 40px;float: right;background-color: white;border-radius: 40px;margin-top:-20px;margin-right: -20px;text-align: center;line-height: 40px;cursor:pointer;}
.layer-close2:hover{background-color:#bbb;}
.dis{position: fixed;z-index: 11;top:0;bottom: 0;left: 0;right: 0;margin:auto;background-color: white;width: 500px;height: 500px;text-align: center;display: none;}
.layer-pop2{position: fixed;width: 100%;height: 100%;background-color:black;top:0;left: 0;opacity:0.5;z-index: 10;display: none;}
.span2{float: left;margin-top:30px;margin-left: 40px;font-size:30px;}
.write2{width: 300px;height: 25px;margin-top: 20px;}
.write3{margin-top: 100px;}
.layer-login2{width: 80%;background-color: red;height: 40px;border: none;border-radius: 10px;color:white;font-size:20px;cursor: pointer;margin-top: 30px;}
.display{display: block;}
.span,.span2{cursor: pointer;}
.span:hover,.span2:hover{text-decoration: underline rgba(0,0,0,0.5);}
.display-none{display:none; }
.top-dispaly{line-height: 30px;background-color:white;border-bottom: 2px solid rgba(0,0,0,0.2);font-weight: bolder;width: 100%;text-align:center;}
.img-display2{display: none;}
.carSecondMenu{width: 350px;height: 400px;background-color: white;text-align: left;display: none;border:1px rgba(0,0,0,0.3) solid;}
.carTop{width: 100%;height: 15%;}
.carCenter{width: 90%;height: 70%;margin-left: 5%;overflow: auto;}
.carButton{width: 100%;height: 15%;}
#goShop{float: right;background:red;color: white;width: 80px;height: 50px;text-align: center;position: relative;top: 5px;right: 15px;}
.carCenter>ul>li>img{width: 60px;height: 60px;}
.carCenter>ul>li{border-bottom:1px solid rgba(0,0,0,0.5);position: relative;}
.sp1{position: absolute;}
.headClass{background: rgba(0,0,0,0.9);width: 100%;height: 70px;clear: both;margin-top: 40px;}
.topClass{width:55%;height: 100%;left: 30%;position: relative;text-align: center;}
.topClass>ul>li{float: left;line-height: 70px;margin-left: 50px;font-size:20px;color: white;}
慕函数3468989 2018-09-30
源自：项目：JQ实现瀑布流   5-2 作业题
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

1回答
妮可妮可妮_ 2018-09-30 15:31:28

http://img1.sycdn.imooc.com//climg/5bb0760d0001295203250194.jpg

黑色导航条部分,建议不要使用定位哦~使用margin值也是可以的,因为使用定位会将二级菜单盖住,

margin的值可以自己调整,祝学习愉快!

0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

请问老师二级菜单怎么循环5次
31 0 8
二级菜单
12 0 3
老师，请问这个jquery的部分为什么二级菜单出不来
15 0 3
请问为什么移入二级菜单还是没显示出来。
18 0 3
请教一下老师一级菜单与二级菜单切换的问题
0 0 7

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

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师