跟着这节课做完之后，之前导航鼠标悬浮显示子导航的功能，还有回到顶部的功能失效了。

index.html

---------------------

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>index</title>

<link rel="stylesheet" href="css/layout.css">

<link rel="stylesheet" href="css/base.css">

<link rel="stylesheet" href="css/ui.css">

</head>

<body>

<div id="top" class="top">

<div class="wrap">

<p class="call">010-114/116114电话预约</p>

<p class="welcome">欢迎来到城市医院预约挂号统一平台 请 

<a href="">登录</a>

<a href="">注册</a>    

<a href="">帮助中心</a></p>

</div>

</div>

<div id="header" class="header">

<div class="wrap">

<a href="#" class="logo"><img src="./img/logo.png" alt=""></a>

<div class="search ui-search">

<div class="ui-search-selected">医院</div>

<div class="ui-search-select-list">

<a href="#1">科室</a>

<a href="#1">疾病</a>

<a href="#1">医院</a>

</div>

<input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">

<a href="#" class="ui-search-submit"> </a>

</div>

</div>

</div>

<div id="nav" class="nav">

<div class="wrap">

<div class="link menu">全部科室

<div class="menu-list ui-menu">

<div class="ui-menu-item">

<a href="#1" class="ui-menu-item-department">内科</a>

<a href="#1" class="ui-menu-item-disease">高血压</a>

<a href="#1" class="ui-menu-item-disease">冠心病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">

内科

</div>

<div class="ui-menu-item-detail-group-list">

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

</div>

</div>

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">

内科

</div>

<div class="ui-menu-item-detail-group-list">

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

</div>

</div>

</div>

</div>

<div class="ui-menu-item">

<a href="#1" class="ui-menu-item-department">内科</a>

<a href="#1" class="ui-menu-item-disease">高血压</a>

<a href="#1" class="ui-menu-item-disease">冠心病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">

内科

</div>

<div class="ui-menu-item-detail-group-list">

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

</div>

</div>

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">

内科

</div>

<div class="ui-menu-item-detail-group-list">

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

</div>

</div>

</div>

</div>

<div class="ui-menu-item">

<a href="#1" class="ui-menu-item-department">内科</a>

<a href="#1" class="ui-menu-item-disease">高血压</a>

<a href="#1" class="ui-menu-item-disease">冠心病</a>

<div class="ui-menu-item-detail">

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">

内科

</div>

<div class="ui-menu-item-detail-group-list">

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

</div>

</div>

<div class="ui-menu-item-detail-group">

<div class="ui-menu-item-detail-group-caption">

内科

</div>

<div class="ui-menu-item-detail-group-list">

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

<a href="#1">心脑血管科</a>

</div>

</div>

</div>

</div>

</div>

</div>

<a href="" class='link'>按医院挂号</a>

<a href="" class='link'>按科室挂号</a>

<a href="" class='link'>按疾病挂号</a>

<a href="" class='link'>最新公告</a>

<a href="" class='link right'>社会知名医院</a>

</div>

</div>

<div id="banner" class="banner">

<div class="banner-slider ui-slider">

<div class="ui-slider-wrap">

<a href="#0" class="item"><img src="img/banner_1.jpg" alt="banner-1"></a>

<a href="#1" class="item"><img src="img/banner_2.jpg" alt="banner-2"></a>

<a href="#2" class="item"><img src="img/banner_3.jpg" alt="banner-3"></a>

</div>

<div class="ui-slider-arrow">

<a href="#l" class="item left"> </a>

<a href="#r" class="item right"> </a>

</div>

<div class="ui-slider-process">

<a href="#0" class="item item_focus"> </a>

<a href="#1" class="item"> </a>

<a href="#2" class="item"> </a>

</div>

</div>

<div class="banner-search">

<div class="caption">

<span class="text">快速预约</span>

</div>

<div class="form ui-cascading">

<div class="line">

<select name="area" id="area" data-search="getDistinctArea" data-where="">

<option>医院地区</option>

</select>

</div>

<div class="line">

<select name="level" id="level" data-search="getLeveByArea" data-where="">

<option>医院等级1</option>

<option>医院等级2</option>

</select>

</div>

<div class="line">

<select name="name" id="name" data-search="getNameByAreaAndLevel" data-where="">

<option>医院名称2</option>

</select>

</div>

<div class="line">

<select name="dapartment" id="dapartment" data-search="getDepartmentArrByHospitalName" data-where="">

<option>医院科室3</option>

</select>

</div>

</div>

<div class="submit">

<input type="button" class="button" value="快速查询">

</div>

</div>

<div class="banner-help">

<div class="caption">

<span class="text">帮助中心</span>

</div>

<div class="list">

<a href="" class="link">账号指南</a>

<a href="" class="link">预约指南</a>

<a href="" class="link">账号找回</a>

<a href="" class="link">常见问题</a>

</div>

</div>

</div>

<div id="content" class="content">

<div class="wrap clearfix">

<div class="content-tab">

<div class="caption">

<a href="#8" class="item">医院</a>

<a href="#7" class="item item_focus">科室</a>

</div>

<div class="block">

<div class="item">

<div class="block-caption">

<a href="#1" class="block-caption-item block-caption-item_focus">全部</a>

<a href="#1" class="block-caption-item">东城区</a>

<a href="#1" class="block-caption-item">西城区</a>

<a href="#1" class="block-caption-item">朝阳区</a>

<a href="#1" class="block-caption-item">朝阳区</a>

<a href="#1" class="block-caption-item">朝阳区</a>

<a href="#1" class="block-caption-item">西城区</a>

<a href="#1" class="block-caption-item">朝阳区</a>

<a href="#1" class="block-caption-item">其他</a>

</div>

<div class="block-content">

<div class="block-wrap">

<div class="block-list clearfix">

<div class="item">

<img src="img/hospital-1.jpg" alt="xx医院">

<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

<div class="item-phone">电话：东院咨询台：010-69155564..</div>

<div class="item-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</div>

</div>

<div class="item">

<img src="img/hospital-1.jpg" alt="xx医院">

<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

<div class="item-phone">电话：东院咨询台：010-69155564..</div>

<div class="item-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</div>

</div>

<div class="item">

<img src="img/hospital-1.jpg" alt="xx医院">

<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

<div class="item-phone">电话：东院咨询台：010-69155564..</div>

<div class="item-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</div>

</div>

<div class="item">

<img src="img/hospital-1.jpg" alt="xx医院">

<div class="item-name">北京协和医院<span class="item-level">【三级甲等】</span></div>

<div class="item-phone">电话：东院咨询台：010-69155564..</div>

<div class="item-address">[东院]北京市东城区帅府园一号[西院]北京市西城区大木仓...</div>

</div>

</div>

<div class="block-text-list clearfix">

<a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

<a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

<a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

<a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

<a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

<a href="#9" class="item">首都儿科研究所附属儿童医院<span class="level">【三级甲等】</span></a>

</div>

<div class="block-more">更多医院</div>

</div>

<div class="block-wrap" style="display: none;">

其他城区内容

</div>

</div>

</div>

<div class="item" style="display: none">

科室内容

</div>

</div>

</div>

<div class="content-news">

<div class="caption"> 最新公告 <a href="" class="more">| 更多</a></div>

<div class="list">

<a href="#9" class="link">医院特需门诊暂停更新号源通...</a>

<a href="#9" class="link">防护策略升级通知</a>

<a href="#9" class="link">医院特需门诊暂停更新号源通...</a>

<a href="#9" class="link">防护策略升级通知</a>

<a href="#9" class="link">医院特需门诊暂停更新号源通...</a>

<a href="#9" class="link">防护策略升级通知</a>

</div>

</div>

<div class="content-close">

<div class="caption"> 停诊公告 <a href="" class="more">| 更多</a></div>

<div class="list">

<a href="#9" class="link">医院特需门诊暂停更新号源通...</a>

<a href="#9" class="link">防护策略升级通知</a>

<a href="#9" class="link">医院特需门诊暂停更新号源通...</a>

<a href="#9" class="link">防护策略升级通知</a>

<a href="#9" class="link">医院特需门诊暂停更新号源通...</a>

<a href="#9" class="link">防护策略升级通知</a>

</div>

</div>

</div>

</div>

<div id="footer" class="footer">

Copyright © 2019 imooc版权所有

</div>

<script src="js/jquery-1.7.1.js"></script>

<script src="js/ui.js"></script>

<script src="js/data.js"></script>

</body>

</html>

---------------------

ui.css

-----------------

/*搜索*/

.ui-search{

background:url(../img/ui-search.jpg) center no-repeat;

font-size:14px;

color:#fff;

}

.ui-search-selected{

width:70px;

height:38px;

line-height:38px;

position: absolute;

left:0;

top:0;

text-indent:14px;

}

.ui-search-select-list{

display: none;

position: absolute;

width:67px;

line-height:24px;

background-color:#fff;

box-shadow:3px 3px 5px rgba(0,0,0,.2);

left:2px;

top:36px;

z-index:2;

}

.ui-search-select-list a{

display: block;

color:#a5a2a2;

text-align:center;

}

.ui-search-select-list a:hover{

background-color:#ebeef5;

}

.ui-search-input{

width:208px;

height:26px;

position: absolute;

top:5px;

left:71px;

line-height:26px;

font-size:13px;

color:#a5a2a2;

}

.ui-search-submit{

display: block;

position: absolute;

right:0;

top:1px;

width:40px;

height:36px;

}

/*ui-menu分类菜单*/

.ui-menu{}

.ui-menu-item{

height:22px;

line-height:22px;

padding:8px 5px 9px 6px;

margin-left:2px;

}

.ui-menu-item:hover{

background-color:#fff;

}

.ui-menu-item-department{

float: left;

height:22px;

line-height:22px;

position: relative;

padding-left:30px;

font-size:13px;

}

.ui-menu-item-department:before{

content:'';

display: block;

width:22px;

height:21px;

position: absolute;

left:0;

top:1px;

background:url(../img/icon-menu.jpg) -22px 0 no-repeat;

}

.ui-menu-item:nth-child(2) .ui-menu-item-department:before{

background-position-y:-22px;

}

.ui-menu-item:nth-child(3) .ui-menu-item-department:before{

background-position-y:-66px;

}

.ui-menu-item-disease{

font-size:12px;

float: right;

padding-left:5px;

color:#d7f3ff;

}

.ui-menu-item:hover .ui-menu-item-department:before{

background-position:0;

}

.ui-menu-item:hover .ui-menu-item-department{

color:#333;

}

.ui-menu-item:hover .ui-menu-item-disease{

color:#868686;

}

.ui-menu-item:hover .ui-menu-item-detail{

display:block;

}

.ui-menu-item-detail{

display: none;

position: absolute;

width:500px;

height:393px;

padding:20px 10px 10px 29px;

background:#fff url(../img/bg-menu.jpg) center no-repeat;

top:0;

left:190px;

box-shadow:5px 5px 2px rgba(0,0,0,.1);

}

.ui-menu-item-detail-group{

padding-bottom:20px;

text-align:left;

}

.ui-menu-item-detail-group-caption{

width:100%;

display: block;

height:34px;

line-height:34px;

color:#666;

font-size:16px;

font-weight:bold;

}

.ui-menu-item-detail-group-list{

line-height:23px;

}

.ui-menu-item-detail-group-list a{

display: inline-block;

color:#868686;

margin-right:12px;

padding-bottom:5px;

}

.ui-menu-item-detail-group-list a:after{

content:'|';

color:#ddd;

padding-left:12px;

}

/*回到顶部*/

.ui-backTop{

display: none;

position: fixed;

right: 2px;

bottom:2px;

z-index:9;

width:40px;

height:40px;

color:#fff;

background:rgba(102,102,102,.9) url(../img/icon-go-up.png) center no-repeat;

}

.ui-backTop:hover{

background:rgba(102,102,102,.9);

}

.ui-backTop:hover:after{

content:'回到顶部';

display: block;

line-height:20px;

text-align:center;

}

/*ui-slider幻灯片组件*/

.ui-slider{

width:544px;

height:414px;

position: relative;

overflow:hidden;

}

.ui-slider-wrap{

width:99999px;

height:414px;

position: absolute;

left:0;

right:0;

transition:all .5s;

}

.ui-slider-wrap .item{

display: block;

float: left;

width:544px;

height:414px;

}

.ui-slider-arrow{

width:544px;

height:40px;

position: absolute;

margin-top:-20px;

top:50%;

}

.ui-slider-arrow .item{

display: block;

width:40px;

height:40px;

position: absolute;

top:0;

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

}

.ui-slider-arrow .left{

left:0;

}

.ui-slider-arrow .right{

right:0;

background-position: -40px 0;

}

.ui-slider-process{

width:544px;

height:12px;

text-align:center;

position: absolute;

left:0;

bottom:20px;

}

.ui-slider-process .item{

display: inline-block;

width:16px;

height:16px;

background:url(../img/ui-slider-process.png) no-repeat;

}

.ui-slider-process .item_focus,

.ui-slider-process .item:hover{

background-position: -23px 0;

}

---------------

ui.js

-----------------------

//ui-search定义

$.fn.UISearch=function(){

var ui=$(this);

$('.ui-search-selected',ui).on('click',function(){

$('.ui-search-select-list').show();

return false;

});

$('.ui-search-select-list a',ui).on('click',function(){

$('.ui-search-selected').text($(this).text());

$('.ui-search-select-list').hide();

return false;

});

$('body').on('click',function(){

$('.ui-search-select-list').hide();

})

}

//ui-tab

/**

* [UiTab description]

* @param {[type]} header [tab选项卡切换部分classname]

* @param {[type]} content [tab选项卡内容区域部分classname]

* @param {[type]} focus_prefix [tab选项卡高亮样式前缀，可选]

*/

$.fn.UiTab=function(header,content,focus_prefix){

var ui=$(this);

var tabs=$(header,ui);

var cons=$(content,ui);

var focus_prefix=focus_prefix||'';

tabs.on('click',function(){

var index=$(this).index();

tabs.removeClass(focus_prefix+'item_focus').eq(index).addClass(focus_prefix+'item_focus');

cons.hide().eq(index).show();

return false;

})

}

//ui-backTop

$.fn.UiBackTop=function(){

var ui=$(this);

var el=$('<a class="ui-backTop" href="#0"></a>');

ui.append(el);

var windowHeight=$(window).height();

$(window).on('scroll',function(){

var top = $("body").scrollTop() || $(document).scrollTop();

if(top>windowHeight){

el.show();

}else{

el.hide();

}

});

el.on('click',function(){

$(window).scrollTop(0);

});

}

//ui-slider

//1、左右箭头控制翻页

//2、翻页的时候，进度点联动

//3、翻到第三页，下一页回到首页；反之同理

//4、进度点控制翻页

//5、自动翻页

//6、滚动过程中，屏蔽其他操作

//7、高级无缝滚动

$.fn.UiSlider=function(){

var ui=$(this);

var wrap=$('.ui-slider-wrap');

var btn_prev=$('.ui-slider-arrow .left',ui);

var btn_next=$('.ui-slider-arrow .right',ui);

var items=$('.ui-slider-wrap .item',ui);

var tips=$('.ui-slider-process .item',ui);

//预定义

var current=0;

var size=items.size();

var width=items.eq(0).width();

var enableAuto=true;

//设置自动滚动感应（鼠标在wrap中，不要自动滚动）

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

enableAuto=false;

}).on('mouseout',function(){

enableAuto=true;

});

//具体操作

wrap.on('move_prev',function(){

if(current<=0){

current=size;

}

current=current-1;

wrap.triggerHandler('move_to',current);

}).on('move_next',function(){

if(current>=size-1){

current=-1;

}

current=current+1;

wrap.triggerHandler('move_to',current);

}).on('move_to',function(evt,index){

wrap.css('left',index*width*-1);

tips.removeClass('item_focus').eq(index).addClass('item_focus');

}).on('auto_move',function(){

setInterval(function(){

enableAuto && wrap.triggerHandler('move_next');

},1000);

}).triggerHandler('auto_move');

//事件

btn_prev.on('click',function(){

wrap.triggerHandler('move_prev');

});

btn_next.on('click',function(){

wrap.triggerHandler('move_next');

});

tips.on('click',function(){

var index=$(this).index();

wrap.triggerHandler('move_to',index);

});

}

//ui-cascading多级联动

$.fn.UiCascading=function(){

var ui=$(this);

var selects=$('select',ui);

selects.on('change',function(){

var val=$(this).val();

var index=selects.index(this);

//触发下一个select的更新

var where=$(this).attr('data-where');

where=where?where.split(','):[];

where.push($(this).val());

selects.eq(index+1)

.attr('data-where',where.join(','))

.triggerHandler('reloadOptions');

//触发下一个之后的select的初始化（清除不应该的数据项）

ui.find('select:gt('+(index+1)+')').each(function(){

$(this)

.attr('data-where','')

.triggerHandler('reloadOptions');

})

}).on('reloadOptions',function(){

var method=$(this).attr('data-search');

var args=$(this).attr('data-where').split(',');

var data=AjaxRemoteGetData[method].apply(this,args);

var select=$(this);

select.find('option').remove();

$.each(data,function(i,item){

var el=$('<option value="'+item+'">'+item+'</option>');

select.append(el);

});

});

selects.eq(0).triggerHandler('reloadOptions');

}

//页面的脚本逻辑

$(function(){

$('.ui-search').UISearch();

$('.content-tab').UiTab('.caption>.item','.block>.item');

$('.content-tab .block .item').UiTab('.block-caption>a','.block-content>.block-wrap','block-caption-');

$('body').UiBackTop();

$('.ui-slider').UiSlider();

$('.ui-cascading').UiCascading();

})

跟着这节课做完之后，之前导航鼠标悬浮显示子导航的功能，还有回到顶部的功能失效了。之前都是实现的，是不是代码冲突了？？

陈莺莺呀 2019-11-13

源自：实战：挂号平台首页 5-10 首页.UI组件-UiCascading（下）

4

收起

2回答

好帮手慕糖 2019-11-13 19:01:47

同学你好，不是兼容性的问题，是因为设置了显示隐藏，具体可以到另一个问题中进行查看。

https://class.imooc.com/course/qadetail/169426

祝学习愉快！

好帮手慕糖 2019-11-13 14:55:04

同学你好，关于你的问题，解答如下：

由于layout.css文件使用的是课程中的，所以在样式上有点区别；

1、如下，是指左侧的这个子菜单显示吗？这里测试是有显示的，不过有部分被遮盖了，建议：可以设置下层级。

2、点击返回顶部这里测试是有效的，是使用的谷歌浏览器进行测试，同学可以在测试下。

若还是无法解决，可以将完整的代码粘贴过来，便于准确的定位与解决问题。

祝学习愉快！

提问者陈莺莺呀 #1

老师，全部代码和截图，我已经重新提问了，在我最新提问里。情况是：谷歌浏览器，按f12开发者模式在下面，会出现箭头。正常情况下没有出现。考虑是代码的兼容性问题。

2019-11-13 16:13:26

相似问题

2-6导航ulli在缩小时错位，添加overflow:hidden;后：hover鼠标滑过失效

鼠标离开导航栏以后，导航栏不会自动恢复，要点击了其他导航栏才恢复，怎么破？

页面缩小到768px之后，顶部的导航不见了

顶部导航条问题

2-7作业导航问题

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

2.组件化网页开发

参与学习人
提交作业 1121 份
解答问题 14456 个

本阶段在运用JS实现动态网页开发的基础上，带你深入理解企业开发核心思想，完成一个企业级网页的开发，体验前端工程师的成就感。

本课精华内容

问答作业

老师！请教一段代码

37 3

prev+next选择器是否和父子选择器一样呢

22 4

2-11检查

78 1

老师，这样对吗

80 1

提问的同学看这里（慕课网出品）

56 1

查看更多本课问答

请稍等 ...

意见反馈帮助中心 APP下载