还有几个小问题请老师解决 顺便看下还有什么地方可以改进
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>挂号平台</title>
<script src="js/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="header">
<div class="top">
<div class="wrap">
<div class="call">010-114/116114电话预约</div>
<div class="welcome">欢迎来到城市医院预约挂号统一平台 请
<span class='pointer'>登录</span>
<span class='pointer'>注册</span>
<span class='pointer'>帮助中心</span></div>
</div>
</div>
<div class="middle">
<div class="wrap clearfix">
<div class="logo"></div>
<div class="search">
<div class="search-select" id="more">医院</div>
<div class="search-select-more">
<span class="item">医院</span>
<span class="item">科室</span>
<span class="item">疾病</span>
</div>
<input type="text" class="text" placeholder="搜索一下">
<a href="#1" class="open"></a>
</div>
</div>
</div>
<div class="bottom">
<div class="wrap">
<p class="link">首页</p>
<p class="link">按医院挂号</p>
<p class="link">按科室挂号</p>
<p class="link">按疾病挂号</p>
<p class="link">最新公告</p>
<p class="link">社会知名医院</p>
</div>
</div>
</div>
<div class="main">
<div class="main-header">
<div class="main-header-picture">
热门科室
</div>
<div class="main-header-content">
<div class="wrap-illness clearfix">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
</div>
<div class="main-department clearfix">
<div class="main-department-left">
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">幼儿科<span class="arrow">></span></p>
<p class="left-content">神经外科<span class="arrow">></span></p>
<p class="left-content">神经内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">耳鼻咽喉头颈科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
<p class="left-content">内科<span class="arrow">></span></p>
</div>
<div class="main-department-right">
<div class="right-content">
<div class="right-head">内科</div>
<div class="right-illness">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
<div class="right-head">内科</div>
<div class="right-illness">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
<div class="right-head">内科</div>
<div class="right-illness">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
<div class="right-head">内科</div>
<div class="right-illness">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
<div class="right-head">内科</div>
<div class="right-illness">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
<div class="right-head">内科</div>
<div class="right-illness">
<p class="illness">神经外科</p>
<p class="illness">妇科</p>
<p class="illness">产科</p>
<p class="illness">儿科</p>
<p class="illness">外科</p>
<p class="illness">眼科</p>
<p class="illness">骨科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
<p class="illness">神经外科</p>
</div>
</div>
</div>
</div>
<div class="open_more">展开全部</div>
</div>
</div>
<div class="footer">Copyright © 2017慕课网版权所有</div>
<script>
var index = 0;
$("#more").click(function () {
$('.search-select-more').show()
})
$('.search-select-more .item').click(function () {
$("#more").text($(this).text())
$('.search-select-more').hide()
})
$('.open_more').click(function () {
if (index == 0) {
$(this).text('收缩全部')
$(".wrap-illness").animate({
height: "100%"
})
index = 1;
} else {
$(this).text('展开全部')
$(".wrap-illness").animate({
height: "70px"
})
index = 0;
}
})
</script>
</body>
</html>
/* 通用样式设置 */
* {
margin: 0;
padding: 0;
border: 0;
}
a {
text-decoration: none;
}
/* 清除浮动 */
.clearfix::after {
content: " ";
display: block;
clear: both;
}
/* 限定宽度 居中 */
.wrap {
width: 1000px;
margin: 0 auto;
}
/* 头部 */
.header {
width: 100%;
}
/* 头部第一部分 */
.header .top {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 13px;
color: #868686;
background-color: #f5f5f5;
}
/* 电话预约 */
.header .top .call {
float: left;
padding-left: 20px;
/* background: url(../img/icon-call.png) no-repeat center left; */
background: url(http://img1.sycdn.imooc.com/climg//58c61b9d0001e02d00170017.png) no-repeat center left;
}
/* 登录 注册 帮助中心 */
.header .top .welcome {
float: right;
}
.pointer {
color: #2da5e1;
padding: 0px 10px;
}
.pointer:hover {
cursor: pointer;
}
/* 头部第二部分 */
/* logo区 */
.middle .logo {
width: 402px;
height: 74px;
/* background: url(../img/logo.png) no-repeat center left; */
background: url(http://img1.sycdn.imooc.com/climg//58c61b2f0001f5c008400172.png) no-repeat center left;
background-size: contain;
float: left;
cursor: pointer;
}
/* 搜索区 */
.middle .search {
width: 326px;
height: 38px;
/* background: url(../img/ui-search.jpg) no-repeat center; */
background: url(http://img1.sycdn.imooc.com/climg//58c61b7e00012b9303260038.jpg) no-repeat center;
background-size: contain;
float: right;
margin-top: 18px;
position: relative;
}
/*输入框*/
.middle .text {
width: 208px;
height: 26px;
line-height: 26px;
position: absolute;
top: 6px;
left: 73px;
outline: none;
}
.middle .open {
width: 40px;
height: 36px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
}
.middle .search .search-select {
width: 70px;
height: 38px;
line-height: 38px;
text-indent: 14px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.middle .search .search-select-more {
width: 70px;
position: relative;
line-height: 30px;
display: none;
z-index: 2;
}
.middle .search .search-select-more .item {
font-size: 14px;
display: block;
color: #a5a2a2;
text-align: center;
background: #fff;
}
.middle .search .search-select-more .item:hover {
cursor: pointer;
background-color: #ebeef5;
}
/* 头部第三部分 */
.bottom {
background-color: #60bff2;
height: 36px;
}
.bottom .link {
/* width: 80px; */
color: #f5f5f5;
margin-left: 40px;
padding: 0 5px;
line-height: 36px;
font-size: 16px;
float: left;
}
.bottom .link:hover {
cursor: pointer;
opacity: .8;
}
.bottom .link:nth-child(3) {
background-color: #1fa4f0;
}
.bottom .link:last-child {
float: right;
}
/* 主体 */
.main {
width: 1000px;
margin: 0 auto;
position: relative;
margin-bottom: 100px;
}
.main .main-header {
margin-top: 10px;
}
.main .main-header .main-header-picture {
height: 30px;
line-height: 30px;
/* background: url(../img/bg-department.jpg) no-repeat center left; */
background: url(http://img1.sycdn.imooc.com/climg//58c61a4f0001967a01380030.jpg) no-repeat center left;
color: #f5f5f5;
text-indent: 15px;
}
.main .main-header .main-header-content {
border: 1px solid #868686;
border-top: 2px solid #1fa4f0;
}
.wrap-illness {
width: 820px;
height: 70px;
overflow: hidden;
}
.main .main-header .main-header-content .illness {
width: 70px;
height: 35px;
line-height: 35px;
float: left;
font-size: 14px;
color: #666;
padding: 0 50px 0 25px;
cursor: pointer;
}
.main .main-header .main-header-content .illness:nth-child(6n) {
padding-right: 0px;
}
.open_more {
width: 70px;
height: 20px;
line-height: 20px;
text-align: center;
color: blue;
text-decoration: underline;
position: absolute;
top: 80px;
right: 20px;
cursor: pointer;
font-size: 14px;
}
.main-department {
width: 100%;
margin-top: 30px;
}
.main-department-left {
float: left;
width: 230px;
font-size: 14px;
color: #666;
line-height: 30px;
border: 1px solid #868686;
}
.main-department-left .left-content {
text-indent: 40px;
position: relative;
}
.main-department-left .left-content::before {
content: " ";
display: block;
position: absolute;
top: 4px;
left: 8px;
width: 22px;
height: 21px;
/* background: url(../img/icon-menu.jpg) no-repeat 0px 0; */
background: url(http://img1.sycdn.imooc.com/climg//58c61b610001c58300440638.jpg) no-repeat 0px 0;
}
.main-department-left .left-content:nth-child(2)::before {
background-position-y: -22px;
}
.main-department-left .left-content:nth-child(3)::before {
background-position-y: -44px;
}
.main-department-left .left-content:nth-child(4)::before {
background-position-y: -66px;
}
.main-department-left .left-content:nth-child(5)::before {
background-position-y: -88px;
}
.main-department-left .left-content:nth-child(6)::before {
background-position-y: -110px;
}
.main-department-left .left-content:nth-child(7)::before {
background-position-y: -132px;
}
.main-department-left .left-content:nth-child(8)::before {
background-position-y: -154px;
}
.main-department-left .left-content:nth-child(9)::before {
background-position-y: -176px;
}
.main-department-left .left-content:nth-child(10)::before {
background-position-y: -198px;
}
.main-department-left .left-content:nth-child(11)::before {
background-position-y: -222px;
}
.main-department-left .left-content:nth-child(12)::before {
background-position-y: -244px;
}
.main-department-left .arrow {
float: right;
padding-right: 10px;
}
.main-department-right {
float: right;
width: 730px;
font-size: 14px;
color: #666;
border: 1px solid #868686;
}
.main-department-right .right-head {
margin: 40px 30px 0px;
height: 30px;
line-height: 20px;
color: #00b3ea;
font-size: 15px;
border-bottom: 1px dashed #a5a2a2;
}
.main-department-right .right-illness {
width: 100%;
margin: 20px 30px;
}
.main-department-right .right-illness .illness {
width: 100px;
display: inline-block;
margin: 10px 30px;
}
/* 页脚 */
.footer {
height: 100px;
line-height: 100px;
text-align: center;
background-color: #eceef2;
font-size: 12px;
color: #666;
}
第一个问题 搜索框 search-select 这里 只有点了 search-select-more 里的 item 才会隐藏 怎么样做到点其他地方也会隐藏
第二个问题 展开全部 展开的时候 没有像效果图一样的缓慢展开效果 只有收缩的时候有 这个怎么解决
正在回答
同学你好，问题解答如下：
1、可以在#more点击事件中添加隐藏效果，也可以在文档中添加隐藏效果。定义一个标志变量，参考
bool为true的时候设置显示，为false的时候设置隐藏，记得切换值。并且在#more点击事件中添加阻止冒泡的代码，避免还没有显示的时候触发文档点击事件中的隐藏。
2、展开没有动画效果是因为最终高度是由内容撑起来的，100%并不是一个固定的高度值。收缩的时候100%的高度是计算出来的，所以有动画效果。建议100%换为固定值
3、代码整体实现是可以的，不需要修改了。
祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星