我写的代码鼠标移出导航栏时，会出现子菜单没有被隐藏的现象，不知道是哪里的bug？
/////(1)search.js
(function($){
var $search = $('.search'),
$input = $search.find('.search-inputbox'),
$btn = $search.find('.search-btn'),
$from = $search.find('.search-from'),
$layer = $search.find('.search-layer');
//验证
$from.on('submit',function(){
if($.trim($input.val()) === ''){
return false;
}
});
//自动完成
$input.on('input',function(){
var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1551514059537_6111&callback=jsonp6112&code=utf-8&area=c2c&q='+
encodeURIComponent($.trim($input.val()));
$.ajax({
url: url,
dataType:'jsonp'
}).done(function(data){
// console.log(data);
var html = '',
dataNum = data['result'].length;
maxNum = 10;
if (data['result'].length != 0){
for (var i = 0; i < dataNum; i++) {
if(i >= maxNum) break;
html+='<li class="search-layer-item text-ellipsis">'+ data['result'][i][0]+'</li>';
}}
else{
$layer.hide().html('');
}
$layer.html(html).show();
//给layer.item绑定事件
$layer.find('.search-layer-item').on('click',function(){
$input.val($(this).html());
$from.submit();
})
}).fail(function (){
$layer.hide().html('');
})
});
//input失去焦点，隐藏，input获得交点则显示
$input.on('focus',function(){
$layer.show();
}).on('click',function(){
return false;
})
$(document).on('click',function(){
$layer.hide();
});
})(jQuery);
////(2) showHide.js
(function($){
var css3 = {
fade:{
show:function($elem){
$elem.show();
setTimeout(function(){
$elem.removeClass('fadeOut');
},20);
},
hide:function($elem){
$elem.addClass('fadeOut');
}
}
}
//container菜单栏中延迟加载
$('.dropdown-toggle').hover(function(){
css3.fade.show($(this).next('.dropdown-layer'));},
function(){css3.fade.hide($(this).next('.dropdown-layer'));});
$('.dropdown-layer').hover(function(){css3.fade.show($(this));},
function(){css3.fade.hide($(this));});
$('.loading').on('mouseover',function(e){
var $this =$(this);
if(!$this.data('loaded')){
var $layer =$(this).next('.dropdown-layer'),
html ='';
$layer.html('<li class="dropdown-loading"></li>');
$.getJSON('js/json.json',function(data){
setTimeout(function(){
var html ='';
if(data.length){
for (var i = 0; i < data.length; i++) {
html += ' <li><a href='+data[i].url+' target="_blank" class="menu-item">'+data[i].name+'</a></li>'
}
}
$layer.html(html);
},500);
$this.data('loaded',true);
});}
});
})(jQuery);
//////(3) index.js
(function($){
var $link = $('.category-list').find('.dropdown-link');
$link.on('mouseover',function(e){
var $dropdown = $(this).parents('.dropdown'),
$layer =$dropdown.find('.dropdown-layer');
url = $dropdown.attr('data-load');
$.getJSON(url,function(data){
var html ='';
for (var i = 0; i < data.length; i++) {
html += '<dl class="category-details cf"><dt class="category-details-title fl"><a href="###" target="_blank" class="category-details-title-link">' + data[i].title + '</a></dt><dd class="category-details-item fl">';
for (var j = 0; j < data[i].items.length; j++) {
html += '<a href="###" target="_blank" class="link">' + data[i].items[j] + '</a>';
}
html += '</dd></dl>';
}
$layer.html(html);
});
});
})(jQuery);
//////css
/*nav-site*/
.nav-site{ /*站点导航整体设置*/
width:100%;
background-color: #f3f5f7;
}
.nav-site .container{ /*站点导航内容块整体设置*/
height: 44px;
line-height: 44px;
border-bottom: 1px solid #cdd0d4;
}
.nav-site-login{ /*站点导航“亲，请登陆”设置*/
margin-left:15px;
color:#f01414;
}
.nav-site-signup,
.nav-site-mobile{ /*站点导航“注册和手机购买”设置*/
margin-left:10px;
}
.nav-site-category{
margin:0 10px;
}
.nav-site-service{
margin-right:15px;
}
/*menu dropdown*/
.dropdown-toggle{
height: 100%;
padding: 0 16px 0 12px;
border-left: 1px solid #f3f5f7;
border-right: 1px solid #f3f5f7;
}
.dropdown-arrow{
/*background: url(../img/dropdown-arrow.png) no-repeat;*/
margin-left:8px;
line-height: 1;
}
.dropdown-layer{
top:44px;
background-color:#fff;
border: 1px solid #cdd0d4;
display: block;
}
.menu-item{
display:block;
height:30px;
line-height:30px;
padding:0 12px;
color:#4d555d;
white-space: nowrap;
}
.dropdown-loading{
width: 32px;
height: 32px;
background:url(../img/loading.gif) no-repeat;
margin: 20px;
}
.menu-item:hover{
background-color: #f3f5f7;
color:red;
}
.menu-active .dropdown-toggle{
background-color:#fff;
border-color:#cdd0d4;
}
/*
.menu-active .dropdown-layer{
display:block;
border-top: none;
}*/
/*header区域*/
.header{
width: 100%;
height: 124px;
background-color: #f3f5f7;
}
.header-logo,
.header .search,
.header .cart{
margin-top: 36px;
}
.header-logo{
display: block;
width:136px;
height: 48px;
background: url(../img/header-logo.png) no-repeat;
margin-left: 15px;
}
.header .search{
margin-left: 145px;
}
.header .cart{
margin-right: 15px;
}
/*nav-main*/
.nav-main{
width: 100%;
height: 48px;
background-color: #07111b;
margin-bottom: 8px;
text-indent: 182px;
}
.nav-main .link{
color: #fff;
margin-left: 50px;
font-size: 14px;
line-height: 48px;
}
/*focus*/
.focus{
width:100%;
height: 504px;
background: #eee;
margin-bottom: 8px;
}
.dropdown{
position: relative;
}
.dropdown-toggle{
display:block;
position: relative;
z-index: 2;
}
.dropdown-arrow{
display:inline-block;
vertical-align: middle;
}
.dropdown-layer{
display:non0.5;
position: absolute;
z-index: 1;
}
.dropdown-left{
left:0;
right:auto;
}
.dropdown-right{
right:0;
left:auto;
}
@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1477124206'); /* IE9*/
src: url('font/iconfont.eot?t=1477124206#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../font/iconfont.woff?t=1477124206') format('woff'), /* chrome, firefox */
url('../font/iconfont.ttf?t=1477124206') format('truetype'), /*chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('../font/iconfont.svg?t=1477124206#iconfont') format('svg'); /* iOS 4.1- */
}
.icon {
font-family:"iconfont" !important;
font-size:14px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.menu [class*="-active"] .dropdown-arrow{
/*background-image:url(../img/dropdown-arrow-active.png);*/
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transition: 0.4s;
}
.transition{
-o-transition:0.5s;
-ms-transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
transition:0.5s;
}
.fadeOut{
visibility:hidden !important;
opacity: 0 !important;
}
.slideUpDownCollapse{
height: 0px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.slideLeftRightCollapse{
width: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/*公共样式*/
.container { /*站点导航*/
width: 1200px;
margin: 0 auto;
}
a.link { /*链接正常颜色*/
color: #4d555d;
}
a.link:hover { /*链接经过颜色*/
color: #f01414 !important;
}
.text-hidden{
text-indent: -9999px;
overflow: hidden;
}
/*search*/
.search {
position: relative;
border: 1px solid #cfd2d5;
}
.search-inputbox {
width: 585px;
height: 40px;
line-height: 40px;
padding: 0 10px;
background-color: #fff;
border: none;
}
.search-btn {
width: 73px;
height: 40px;
line-height: 40px;
background-color: #07111b;
border:none;
font-size: 14px;
color: #fff;
text-align: center;
cursor:pointer;
}
.search-layer {
display: none;
position: absolute;
top: 100%;
left: -1px;
width: 100%;
background-color: #fff;
border: 1px solid #cfd2d5;
}
.search-layer-item {
height: 24px;
line-height: 24px;
padding: 0 10px;
cursor: pointer;
}
.search-layer-item:hover {
background-color: #f3f5f7;
}
.text-ellipsis{
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/*catagory*/
.category{
position: relative;
width: 208px;
margin-top: -56px;
font-size: 14px;
}
.category .dropdown{
position: static;
}
.category-title{
display: block;
width: 166px;
height: 48px;
line-height: 54px;
padding: 0 20px;
background-color: #c81414;
color: #fff;
padding-bottom: 8px;
margin-left: 1px;
}
.category-title .icon{
margin-right: 10px;
font-size: 16px;
}
.category-list{
height: 512px;
background: #f01414;
}
.category .dropdown-toggle{
height: 36px;
line-height: 36px;
padding-left: 16px;
color: #fff;
}
.category .dropdown-link{
color: #fff;
}
.category .dropdown-arrow{
position: absolute;
top: 12px;
right: 12px;
font-weight: bold;
font-family: simsun;
}
.category-active .dropdown-toggle{
background:#fff;
}
.category-active .dropdown-toggle,
.category-active .dropdown-link{
color: #f01414;
}
.category .dropdown-layer{
min-height: 473px;
top: 54px;
left: 100%;
width: 744px;
padding: 8px 0 31px 0;
background: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
.category-details{
width: 744px;
margin-top: 24px;
line-height: 20px;
}
.category-details-title{
width: 84px;
padding-right: 16px;
border-right: 1px solid #d9dde1;
text-align: right;
}
.category-details-title-link{
color: #07111b;
font-weight: bold;
}
.category-details-item{
padding-left: 15px;
width: 592px;
}
.category-details-item .link{
margin-right: 16px;
display: inline-block;
}
}
/*css reset*/
/*清除内外边距*/
body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/
ul, ol, li, dl, dt, dd, /*列表元素*/
form, fieldset, legend, input, button, select, textarea, /*表单元素*/
th, td, /*表格元素*/
pre {
padding: 0;
margin: 0;
}
/*重置默认样式*/
body, button, input, select, textarea {
/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/
color: #333;
font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
em, i {
font-style: normal;
}
a {
text-decoration: none;
}
li {
list-style-type: none;
vertical-align: top;
}
img {
border: none;
/*display: block;*/
vertical-align: top;
}
textarea {
overflow: auto;
resize: none;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/*常用公共样式*/
.fl {
float: left;
display: inline;
}
.fr {
float: right;
display: inline;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
.cf {
*zoom: 1;
}
///////html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/common.css"/>
<link rel="stylesheet" href="css/index.css"/>
<link rel="stylesheet" href="css/dropdown.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 站点导航开始 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" id="nav-site-signin" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" id="nav-site-signup" class="nav-site-signup link">免费注册</a></li>
<li class="fl"><a href="###" target="_blank" class="nav-site-mobile link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="menu dropdown fl" >
<a href="###" class="dropdown-toggle link ">我的慕淘<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left fadeOut transition">
<li><a href="###" target="_blank" class="menu-item">已买到的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">我的足迹</a></li>
</ul>
</li>
<li class="menu dropdown fl">
<a href="###" target="_blank" class="dropdown-toggle link">收藏夹<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left fadeOut transition">
<li><a href="###" target="_blank" class="menu-item">收藏的宝贝</a></li>
<li><a href="###" target="_blank" class="menu-item">收藏的店铺</a></li>
</ul>
</li>
<li class="fl">
<a href="###" target="_blank" class="nav-site-category link">商品分类</a>
</li>
<li class="menu dropdown fl">
<a href="###" target="_blank" class="dropdown-toggle link loading">卖家中心<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-left fadeOut transition">
</ul>
</li>
<li class="menu dropdown fl">
<a href="###" target="_blank" class="dropdown-toggle link">联系客服<i class="dropdown-arrow icon"></i></a>
<ul class="dropdown-layer dropdown-right fadeOut transition">
<li><a href="###" target="_blank" class="menu-item">消费者客服</a></li>
<li><a href="###" target="_blank" class="menu-item">卖家客服</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 站点导航结束 -->
<!-- header区开始 -->
<div class="header">
<div class="container">
<h1 class="fl"><a href="index.html" class="header-logo text-hidden">慕课网</a></h1>
<div class="search fl">
<form action="https://uland.taobao.com/sem/tbsearch" class="search-from">
<input type="text" name="keyword" placeholder="请输入商品名" class="search-inputbox fl" autocomplete="off" />
<input type="submit" name="" value="搜索" class="search-btn fl"/>
</form>
<ul class="search-layer">
</ul>
</div>
<div class="cart dropdown fr"></div>
</div>
</div>
<div class="nav-main">
<div class="container">
<a href="###" target="_blank" class="link">数码城</a
><a href="###" target="_blank" class="link">天黑黑</a
><a href="###" target="_blank" class="link">团购</a
><a href="###" target="_blank" class="link">发现</a
><a href="###" target="_blank" class="link">二手特价</a
><a href="###" target="_blank" class="link">名品汇</a>
</div>
</div>
<div class="focus">
<div class="container">
<div class="category fl">
<a href="###" target="_blank" class="category-title"><i class="icon"></i>商品分类</a>
<ul class="category-list">
<li class="dropdown" data-active="category" data-load="js/category-detail-1.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link" data-load="js/category-detail-1.json">家用电器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-2.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">手机</a
>、<a href="###" target="_blank" class="dropdown-link">运营商</a
>、<a href="###" target="_blank" class="dropdown-link">数码</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-3.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">电脑</a
>、<a href="###" target="_blank" class="dropdown-link">办公</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-4.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">家居</a
>、<a href="###" target="_blank" class="dropdown-link">家具</a
>、<a href="###" target="_blank" class="dropdown-link">家装</a
>、<a href="###" target="_blank" class="dropdown-link">厨具</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-5.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">男装</a
>、<a href="###" target="_blank" class="dropdown-link">女装</a
>、<a href="###" target="_blank" class="dropdown-link">童装</a
>、<a href="###" target="_blank" class="dropdown-link">内衣</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-6.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">化妆</a
>、<a href="###" target="_blank" class="dropdown-link">清洁</a
>、<a href="###" target="_blank" class="dropdown-link">宠物</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-7.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">运动户外</a
>、<a href="###" target="_blank" class="dropdown-link">钟表</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-8.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">汽车</a
>、<a href="###" target="_blank" class="dropdown-link">汽车用品</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-9.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">母婴</a
>、<a href="###" target="_blank" class="dropdown-link">玩具乐器</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-10.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">食品</a
>、<a href="###" target="_blank" class="dropdown-link">酒类</a
>、<a href="###" target="_blank" class="dropdown-link">生鲜</a
>、<a href="###" target="_blank" class="dropdown-link">特产</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-11.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">医药保健</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-12.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">图书</a
>、<a href="###" target="_blank" class="dropdown-link">音像</a
>、<a href="###" target="_blank" class="dropdown-link">电子书</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-13.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">彩票</a
>、<a href="###" target="_blank" class="dropdown-link">旅行</a
>、<a href="###" target="_blank" class="dropdown-link">充值</a
>、<a href="###" target="_blank" class="dropdown-link">票务</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
<li class="dropdown" data-active="category" data-load="js/category-detail-14.json">
<div class="dropdown-toggle">
<a href="###" target="_blank" class="dropdown-link">理财</a
>、<a href="###" target="_blank" class="dropdown-link">众筹</a
>、<a href="###" target="_blank" class="dropdown-link">白条</a
>、<a href="###" target="_blank" class="dropdown-link">保险</a>
<i class="dropdown-arrow">></i>
</div>
<div class="dropdown-layer">
<div class="dropdown-loading"></div>
</div>
</li>
</ul>
</div>
<div class="slider fl"></div>
<div class="focus-sidebar fr"> </div>
</div>
</div>
<!-- <script src="js/jquery.js"></script> -->
<script src="js/index.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/transition.js"></script>
<script src="js/showHide.js"></script>
<script src="js/search.js"></script>
</body>
</html>
正在回答 回答被采纳积分+1
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星