左侧菜单hover事件控制右侧详情内容显现的方法
来源：5-11 编程练习
幕布斯3322991
2020-06-17 23:09:15
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script>
<style>
*{
padding:0;
margin:0;
border:0;
}
/*此处填写css样式*/
/* 整体布局 */
.clearfix:after{
content: ' ';
display: block;
height: 0;
line-height: 0;
clear: both;
zoom: 1;
}
.wrap{
width: 1000px;
margin:0 auto;
position: relative;
}
.top {
height: 30px;
background-color: #f5f5f5;
}
.header{
height: 92px;
}
.nav{
height: 36px;
background-color: #60bff2;
}
.content{
padding: 20px 0 38px 0;
}
/* 通用样式 */
p{
margin: 0;
padding: 0;
display: inline-block;
}
a{
text-decoration: none;
}
select,input{
border: none;
outline: none;
}
/* #top 模块内样式 */
.top {
line-height: 30px;
font-size: 13px;
color: #868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url(http://climg.mukewang.com/58c61b9d0001e02d00170017.png) no-repeat center left;
}
.top .welcome{
float: right;
}
.top a{
color: #2da5e1;
padding-left: 10px;
}
/* #header 模块内样式 */
.header .logo{
width: 402px;
height: 74px;
padding: 9px 0;
display: inline-block;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .search {
width: 326px;
height: 38px;
position: absolute;
right: 0px;
top: 29px;
/*background-color: orange;*/
}
/* 搜索 */
.ui-search{
background: url(http://climg.mukewang.com/58c61b7e00012b9303260038.jpg) center no-repeat;
font-size: 14px;
color: #fff;
position: relative;
}
.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: 73px;
line-height: 26px;
font-size: 13px;
color: #A5A2A2;
}
.ui-search-submit{
display: block;
position: absolute;
right: 0;
top: 1px;
width: 40px;
height: 36px;
}
/* #nav 模块内样式 */
.nav .link{
display: inline-block;
float: left;
padding-left: 30px;
line-height: 36px;
color: #fff;
font-size: 16px;
min-width: 80px;
text-align: center;
}
.nav .link_focus{
color: #fff;
background-color: #1fa4f0;
padding: 0 20px;
}
.nav a:hover{
color: #d7f3ff;
}
.nav .right{
float: right;
}
/* #content 模块样式 */
.content-hot{
margin-bottom: 20px;
}
.content-hot-caption{
padding-left: 20px;
height: 30px;
line-height: 30px;
color: #fff;
border-bottom: 2px solid #60bff2;
background: url(http://climg.mukewang.com/58c61a4f0001967a01380030.jpg) no-repeat center left;
}
.content-hot-list{
border: 1px solid #ccc;
padding: 10px;
}
.content-hot-list-item{
display: block;
width: 100px;
padding: 0 10px 0 10px;
font-size: 12px;
color: #4c4948;
float: left;
}
.content-hot-more{
/*display: block;*/
padding-right: 30px;
font-size: 14px;
float: right;
text-decoration: underline;
}
.menu-list{
width: 190px;
/*padding-right: 30px;*/
/*background-color: #1fa4f0;*/
border: 1px solid #ccc;
/*position: relative;*/
}
.ui-menu-item{
height: 22px;
/*position: relative;*/
}
.ui-menu-item .logo{
width: 22px;
height: 22px;
background-image:url('http://climg.mukewang.com/58c61b610001c58300440638.jpg');
}
.ui-menu-item .logo{
float: left;
}
.ui-menu-item:hover{
background-color: #1fa4f0;
cursor: pointer;
}
.ui-menu-item:hover .ui-menu-item-department{
color: #fff;
}
.ui-menu-item:hover .ui-menu-item-department:after{
color: #fff;
}
.ui-menu-item-department{
display: inline-block;
/*width: 120px;*/
height: 22px;
line-height: 22px;
color: #111;
font-size: 12px;
left: 20px;
top: -2px;
position: relative;
}
.ui-menu-item:hover .logo{
background-position-x: -22px;
}
.ui-menu-item-department:after{
display: inline-block;
vertical-align: middle;
content: ">";
color: #111;
font-size: 12px;
left: 20px;
margin-left: 80px;
position: absolute;
}
.ui-menu-item-detail{
/*display: none;*/
position: absolute;
width: 760px;
height: 393px;
padding: 20px 10px 10px 29px;
top: 136px;
left: 200px;
border: 1px solid #ccc;
z-index: 9;
}
</style>
</head>
<body>
<div>
<!--此处填写HTML代码-->
<div class="top" id="top">
<div class="wrap">
<p class="call">010-114/116114电话预约</p>
<div class="welcome">欢迎来到城市医院预约挂号统一平台 请
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">帮助中心</a>
</div>
</div>
</div>
<div class="header" id="header">
<div class="wrap clearfix">
<a href="regExc.html" class="logo"><img src="http://climg.mukewang.com/58c61b2f0001f5c008400172.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" placehold="请输入搜索内容">
<a href="#" class="ui-search-submit"> </a>
</div>
</div>
</div>
<div class="nav" id="nav">
<div class="wrap">
<a href="#" class="link">首页</a>
<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 class="content wrap" id="content">
<div class="content-hot">
<div class="content-hot-caption">热门科室</div>
<div class="content-hot-list clearfix">
<a href="#" class="content-hot-list-item">神经外科</a>
<a href="#" class="content-hot-list-item">妇科</a>
<a href="#" class="content-hot-list-item">产科</a>
<a href="#" class="content-hot-list-item">儿科</a>
<a href="#" class="content-hot-list-item">骨科</a>
<a href="#" class="content-hot-list-item">眼科</a>
<br>
<a href="#" class="content-hot-list-item">耳鼻喉科</a>
<a href="#" class="content-hot-list-item">肿瘤外科</a>
<a href="#" class="content-hot-list-item">肿瘤综合科</a>
<a href="#" class="content-hot-list-item">皮肤美容</a>
<a href="#" class="content-hot-list-item">心理咨询科</a>
<a href="#" class="content-hot-list-item">中医科</a>
<a href="#" class="content-hot-more">展开全部</a>
</div>
</div>
<div class="menu-list ui-menu">
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">内科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">外科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">妇产科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">生殖中心</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">儿科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">骨外科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">眼科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">口腔科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">耳鼻咽喉头颈科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">肿瘤科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">皮肤性病科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">男性学科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">皮肤美容</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">烧伤科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">精神心理科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">中西医结合科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">传染病科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">结核病科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">介入医学科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">康复医学科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">运动医学科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">麻醉医学科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">职业病科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">地方病科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">营养科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">医学影像科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">病理科</a>
</div>
<div class="ui-menu-item">
<div class="logo"></div>
<a href="#1" class="ui-menu-item-department">其他科室</a>
</div>
<!-- <div class="ui-menu-item">
<a href="#1" class="ui-menu-item-department"></a>
</div> -->
</div>
<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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></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"></div>
</div>
</div>
</div>
<div class="footer" id="footer">
</div>
</div>
<script>
//此处填写jQuery代码
// 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-menu 定义
$.fn.UiMenu = function(){
var ui=$(this);
var logos=$(".logo",ui);
var departments=$(".ui-menu-item",ui);
var groups=$(".ui-menu-item-detail-group",ui.parentNode);
// debugger
for (var i = 0; i < logos.length; i++) {
$(logos[i]).css({
'background-position-y':-22*i+'px'
});
$(groups[i]).css({
'display':'none'
});
$(departments[i]).hover(function(){
$(groups[i]).css({
'display':'block'
});
});
}
}
// //ui-menu-item 定义
// $.fn.UiMenuItem=function(){
// }
// 页面的脚本逻辑
$(function () {
$('.ui-search').UiSearch();
$('.ui-menu').UiMenu();
// debugger
// $.('.ui-menu-item').UiMenuItem();
// $('.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();
});
</script>
</body>
</html>641-645行如下，本意是控制当鼠标移动到左侧菜单科室上，对应的右侧详情显示。
本身没有报错，但是没有对应期待的效果。（还是详情区域一片空白）望老师点拨
$(departments[i]).hover(function(){
$(groups[i]).css({
'display':'block'
});
});写回答
1回答
-
好帮手慕久久
2020-06-18
同学你好，问题解答如下：
在for循环中为departments[i]绑定事件，当departments[i]的hover事件触发时，由于for循环已经结束，此时的i等于logo.length，如下：
所以groups[i]获取不到，也就不会显示了。
可做如下修改：
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
1
相似问题
hover问题
回答 1