老师问3个问题！
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title></title> <script src="https://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js"></script> <link rel="stylesheet" href="./CSS/pratice.css"> <style> /*此处填写css样式*/ </style> </head> <body> <div 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 class="header"> <div class="wrap"> <a href="#" class="logo"><img src="http://img1.sycdn.imooc.com/climg//58c61b2f0001f5c008400172.png" alt=""></a> <div class="search"></div> <input type="text" class="search-text" placeholder="请输入搜索内容"> <div class="search-selected">医院</div> <div class="search-select-list"> <a href="#">科室</a> <a href="#">疾病</a> <a href="#">医院</a> </div> </div> </div> <div class="nav"> <div class="wrap"> <div class="nav-menu"> <a href="#" class="nav-item">首页</a> <a href="#" class="nav-item">按医院挂号</a> <a href="#" class="nav-item item_focus">按科室挂号</a> <a href="#" class="nav-item">按疾病挂号</a> <a href="#" class="nav-item">最新公告</a> <a href="#" class="nav-item">社会知名医院</a> </div> </div> </div> <div class="content clearfix"> <div class="wrap"> <div class="content__header"> <span>热门科室</span> <a href="#" class="content__header-item">神经外科</a> <a href="#" class="content__header-item">妇科</a> <a href="#" class="content__header-item">产科</a> <a href="#" class="content__header-item">儿科</a> <a href="#" class="content__header-item">骨科</a> <a href="#" class="content__header-item">眼科</a> <a href="#" class="content__header-item">耳鼻喉</a> <a href="#" class="content__header-item">肿瘤外科</a> <a href="#" class="content__header-item">肿瘤综合科</a> <a href="#" class="content__header-item">皮肤美容</a> <a href="#" class="content__header-item">心理咨询科</a> <a href="#" class="content__header-item">中医科</a> <a href="#" class="more">展开全部</a> <div class="header__header-item hider"> <a href="#" class="content__header-item">生殖中心</a> <a href="#" class="content__header-item">骨外科</a> <a href="#" class="content__header-item">耳鼻咽喉科</a> <a href="#" class="content__header-item">眼科</a> <a href="#" class="content__header-item">肿瘤科</a> <a href="#" class="content__header-item">皮肤美容</a> <a href="#" class="content__header-item">心理咨询科</a> </div> </div> <div class="content__left"> <div href="#" class="content__left-item"><a href="#">内科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">外科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">妇产科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">生殖中心</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">儿科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">骨外科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">眼科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">耳鼻咽喉头颈科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">肿瘤科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">内科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">外科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">妇产科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">生殖中心</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">儿科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">骨外科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">眼科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">耳鼻咽喉头颈科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">肿瘤科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">内科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">外科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">妇产科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">生殖中心</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">儿科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">骨外科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">眼科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">耳鼻咽喉头颈科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">肿瘤科</a><span>></span></div> <div href="#" class="content__left-item"><a href="#">其他科室</a><span>></span></div> </div> <div class="content__right"> <table class="department__list"> <div class="department">内科</div> <tr> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> <td><a>消化内科</a></td> <td><a>内分泌科</a></td> <td><a>免疫科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> <table class="department__list"> <div class="department">外科</div> <tr> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> <td><a>消化内科</a></td> <td><a>内分泌科</a></td> <td><a>免疫科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> </table> <table class="department__list"> <div class="department">妇产科</div> <tr> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> <td><a>消化内科</a></td> <td><a>内分泌科</a></td> <td><a>免疫科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> </table> <table class="department__list"> <div class="department">儿科</div> <tr> <td><a>免疫科</a></td> <td><a>内分泌科</a></td> <td><a> 呼吸科</a></td> </tr> </table> <table class="department__list"> <div class="department">生殖中心</div> <tr> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> <td><a>消化内科</a></td> <td><a>内分泌科</a></td> <td><a>免疫科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> <tr> <td><a>呼吸科</a></td> <td><a> 消化内科</a></td> <td><a>内分泌科</a></td> <td><a>心血管内科</a></td> <td><a>神经内科</a></td> </tr> </table> </div> </div> </div> <div class="footer"> <div class="wrap"> <p>Copyright © 2017慕课网版权所有</p> </div> </div> <script src="./JS/ui.js"></script> </body> </html>
// 封装一个more函数
$.fn.uiMore=function(){
var ui=$(this)
var isblock=true;
ui.on('click',function(){
// isblock==true?($('.hider').show(),isblock=false):($('.hider').hide(isblock=true));
if(isblock){
$('.hider').show();
$('.content .more').text('收起更多');
isblock=false;
}else{
$('.hider').hide();
$('.content .more').text('展开全部');
isblock=true;
}
})
}
// 封装一个搜索框下拉展开函数
$.fn.uiSearchOpen=function(){
var ui=$(this)
var isblock=true;
ui.on('click',function(){
// isblock==true?($('.hider').show(),isblock=false):($('.hider').hide(isblock=true));
if(isblock){
$('.search-select-list').show();
isblock=false;
return false;
}else{
$('.search-select-list').hide();
isblock=true;
return false;
}
})
}
// 封装一个点击body关闭search展开项
$.fn.uiBodyHide=function(){
var ui=$(this)
ui.on('click',function(){
$('.search-select-list').hide();
})
}
// 封装一个选中search菜单项
$.fn.uiSelected=function(){
var ui=$(this);
ui.on('click',function(){
$('.search-selected').text($(this).text());
console.log(this);
})
}
// 页面脚本逻辑
$(function(){
$('.more').uiMore();
$('.search-selected').uiSearchOpen();
$('body').uiBodyHide();
$('.search-select-list a').uiSelected();
})*{
padding:0;
margin:0;
border:0;
}
.clearfix:after{
content: '';
display: block;
clear: both;
zoom: 1;
}
.wrap{
width: 1000px;
margin: 0 auto;
}
.top{
height: 30px;
background-color: #f5f5f5;
line-height: 30px;
font-size: 13px;
color:#868686;
}
.top .call{
float: left;
padding-left: 20px;
background: url('http://img1.sycdn.imooc.com/climg//58c61b9d0001e02d00170017.png')no-repeat 0 ;
}
.top .welcome{
float: right;
}
.top a{
text-decoration: none;
color:#5bb8e8;
}
.header .logo{
display: inline-block;
width: 403px;
height: 74px;
padding:9px 0;
}
.header .logo img{
width: 100%;
height: 100%;
}
.header .wrap{
position: relative;
}
input{
outline: none;
}
.search{
background: url('http://img1.sycdn.imooc.com/climg//58c61b7e00012b9303260038.jpg') no-repeat center;
font-size: 14px;
color:#fff;
position:relative;
width: 326px;
height: 38px;
background-color: orange;
position:absolute;
top:29px;
right:0;
z-index: -1;
}
.search-text{
width: 208px;
height: 26px;
line-height:26px;
position:absolute;
top:35px;
left:750px;
font-size:14px;
color:#A5a2a2;
background-color:rgba(0, 0,0, 0)
}
.search-select-list{
position:absolute;
left:675px;
top:68px;
width: 67px;
height: 80px;
line-height:24px;
background-color: #fff;
box-shadow: 3px 3px 5px rgba(0,0,0,.2);
display: none;
}
.search-select-list a:hover{
background-color: #ebeef5
}
.header .search-select-list a{
margin-bottom: 2px;
text-decoration: none;
display: block;
text-align: center;
line-height:24px;
height: 24px;
color:#A5a2a2;
}
.search-selected{
margin-right: 265px;
width: 50px;
margin-top: 37px;
float: right;
z-index: 99;
color: white;
cursor: pointer;
}
.nav{
height: 36px;
line-height: 36px;
background-color: #60bff2;
color: #fff;
}
a{
text-decoration: none;
}
.nav .item_focus{
background-color: #1fa4f0;
}
.nav a{
display: inline-block;
margin: 0 20px;
padding:0 10px;
font-size: 16px;
}
.nav .nav-item:first-child{
margin-left: 40px;
}
.nav .nav-item:last-child{
float: right;
margin-right: -10px;
}
.nav .nav-item{
color: white;
text-align: center;
}
.content__header{
line-height: 35px;
margin: 50px 0 18px 0;
border: 1px solid #dcdddd;
border-top: 2px solid #49a6d8;
padding: 10px 15px;
}
.content__header span{
background: url('http://img1.sycdn.imooc.com/climg//58c61a4f0001967a01380030.jpg') no-repeat;
position: absolute;
width: 180px;
height: 50px;
color: white;
padding-left: 20px;
margin-left: -15px;
margin-top:-42px ;
}
.content__header .content__header-item{
height: 25px;
line-height: 25px;
width: 90px;
margin-right:50px;
display: inline-block;
color: #555;
font-size: 14px;
}
.content__header .more{
border-bottom: 1px solid blue;
color: blue;
font-size: 14px;
}
.hider{
display: none;
}
.content__left{
float: left;
border: 1px solid #dcdddd;
width: 210px;
position: relative;
}
.content__left a{
color: #555;
margin-left: 50px;
line-height: 40px;
}
.content__left-item a:before{
content:'';
width: 22px;
height: 21px;
display: block;
position: absolute;
margin-top: 10px;
margin-left: 20px;
background: url('http://img1.sycdn.imooc.com/climg//58c61b610001c58300440638.jpg');
}
.content__left span{
float: right;
margin-right: 10px;
}
.content__left span{
color: #555;
}
.content__left-item:nth-child(2) a:before{background-position:0 -22px;}
.content__left-item:nth-child(3) a:before{background-position:0 -44px;}
.content__left-item:nth-child(4) a:before{background-position:0 -66px;}
.content__left-item:nth-child(5) a:before{background-position:0 -88px;}
.content__left-item:nth-child(6) a:before{background-position:0 -110px;}
.content__left-item:nth-child(7) a:before{background-position:0 -132px;}
.content__left-item:nth-child(8) a:before{background-position:0 -154px;}
.content__left-item:nth-child(9) a:before{background-position:0 -176px;}
.content__left-item:nth-child(10) a:before{background-position:0 -22px;}
.content__left-item:nth-child(11) a:before{background-position:0 -44px;}
.content__left-item:nth-child(12) a:before{background-position:0 -66px;}
.content__left-item:nth-child(13) a:before{background-position:0 -88px;}
.content__left-item:nth-child(14) a:before{background-position:0 -110px;}
.content__left-item:nth-child(15) a:before{background-position:0 -132px;}
.content__left-item:nth-child(16) a:before{background-position:0 -154px;}
.content__left-item:nth-child(17) a:before{background-position:0 -176px;}
.content .wrap{
position: relative;
}
.department{
padding: 50px 0px 5px 40px;
border-bottom: 1px dashed #dcdddd;
color: #5bb8e8;
}
.content__right{
width: 760px;
height: 1120px;
border: 1px solid #dcdddd;
left:240px;
position: absolute;
}
.department__list td{
width: 120px;
padding-top:20px;
}
.department__list td:first-child{
padding-left: 60px;
}
.department__list a{
cursor: pointer;
}
.footer {
line-height: 80px;
text-align: center;
background-color: #eceef2;
}问题1.老师我的代码有点问题，在搜索框那里。 点击医院→点击body（重复这个动作4次或以上）会发现有一次是点击不到医院（无法展开菜单项）的，需要再点击多一次（即两次）才能展开。
问题2.另外 点击医院→点击菜单项内容（重复这个动作4次或以上）会发现一样医院也是需要点两次才能展开。
问题3.为什么我这个写法参考老师之前的写法却不能获取？下面的代码是上面的JS代码的部分
$.fn.uiSearchOpen=function(){
var ui=$(this)
var isblock=true;
// 下面这行是看老师前面视频的的写法顺序，为什么到我这里同样的写法就不能获取了?
// $('.search-selected',ui).on('click',function(){
// 老师那样的写法在我这里不行，只能是反过来写才能获取为什么？
$(ui,'.search-selected').on('click',function(){
// 下面是原来上面正常的代码
// ui.on('click',function(){
// isblock==true?($('.hider').show(),isblock=false):($('.hider').hide(isblock=true));
if(isblock){
$('.search-select-list').show();
isblock=false;
return false;
}else{
$('.search-select-list').hide();
isblock=true;
return false;
}
})
}下方这个是老师源码里面的代码。一样的写法，为什么不行？ 反过来才行？
36
收起
正在回答
7回答
同学你好，可以再做如下修改：
祝学习愉快~
好帮手慕码
2020-03-23 15:38:00
同学你好，解答如下：
（1）当把“var isblock=true;”放在点击事件里面的时候，请问是点击input搜索框无法关闭下拉框了吗？老师测试是可以的：
（2）在回复一中已经提到了哦，在同学的代码中，ui和search-selected是同一个元素，不是父子级关系，所以是不可以将ui写在后面的！但是可以将ui放在前面。
而源码中，ui和 ui-search-selected是父子级的关系，所以可以把ui放在后面。同学可以从代码中打印看下：
（3）如果不想要过渡的效果，可以参考第一条中的修改方式，如图：
不要把isblock = true;这句代码放在hide()的括号里哦。
（4）不太清楚同学最后一次粘贴图片的具体代码。无法准确判断。
（5）其他代码是没有问题的。
祝学习愉快~
好帮手慕码
2020-03-23 10:31:15
同学你好，解答如下：
（1）（2）是因为isblock标志符更改的问题，建议把isblock放在点击事件中：
（3）可以打印ui看下。同学的：
ui获取的是点击的内容本身，所以要写在前面。
源码中：
ui获取的是点击内容的父级，所以要写在后面。
（4）这个触发的是浏览器的选中功能，如下：
这个是没有办法避免的。
（5）是写法上问题，建议修改如下：
如果把isblock=true写在括号中，相当于设置了速度的参数，元素从可见到隐藏的过程中，会逐渐地改变其高度、宽度、外边距、内边距和透明度，所以我们视觉上有过渡的效果。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
陈立天
2020-03-22 22:41:26
问题5：
下方这段代码也是从上面截取下来的， 注释的地方如果把他打开（换成非注释状态） 注释下方的if和else条件语句删除的话。这个三元运算符效果也能够实现。为什么比较奇怪的是展开是正常的，点击收起的时候他的速度要稍微慢一点？ 我也没设置动画效果啊！ 同样是条件语句，难道三元运算的条件语句和if条件语句不一样吗？
// 封装一个more函数
$.fn.uiMore=function(){
var ui=$(this)
var isblock=true;
ui.on('click',function(){
// isblock==true?($('.hider').show(),isblock=false):($('.hider').hide(isblock=true));
if(isblock){
$('.hider').show();
$('.content .more').text('收起更多');
isblock=false;
}else{
$('.hider').hide();
$('.content .more').text('展开全部');
isblock=true;
}
})
}
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星