jQ和原生js有点混淆

来源：5-11 编程练习
llleeeee
2019-09-13 11:14:57
<!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样式*/
         body{
            font-size:12px;
            color:#555555;
        }
        /*页面顶部*/
         .top{
            width:100%;
            background-color:#f5f5f5;
            color:#868686; 
            height:30px;;
         }
         .top_wrap{
            width:1000px;
            margin:0 auto;
         }
         .top_wrap_left{
            background:url(http://climg.mukewang.com/58c61b9d0001e02d00170017.png) center left no-repeat;
            padding-left:20px;
            float:left;
            line-height:30px;
            height:30px;
         }
         .top_wrap_right{
            height:30px;
            line-height:30px;
            float:right;
         }
         .top_wrap_right a{
            color:#2da5e1;
            text-decoration: none;
         }
         /*header-logo&search*/
         .header{
            width:1000px;
            height:90px;
            margin:0 auto;
         }
         .header_logo{
            width:390px;
            height:90px;
            background: url(http://climg.mukewang.com/58c61b2f0001f5c008400172.png) center left no-repeat;
            background-size:390px 90px;
            float:left;
         }
         .header_search-wrap{
            width:325px;
            height:90px;
            float:right;
         }
         .header_search{
            margin-top:26px;
            width:326px;
            height:38px;
            background: url(http://climg.mukewang.com/58c61b7e00012b9303260038.jpg) center left no-repeat; 
            position:relative;
         }
         .header_search_left{
            display:inline-block;
            width:53px;
            height:36px;
            margin-top:1px;
            line-height:35px;
            font-size: 14px;
            padding-left:12px;
            cursor:pointer;
            color:#ffffff;
            
         }
         .header_search_input{
            border:none;
            outline:none;
            display:inline-block;
            width:214px;
            height:36px;
            margin-top:1px;
            line-height: 36px;
            color:#868686;
         }
         .header_search_right{
            display:inline-block;
            width:34px;
            height:22px;   /*这里的div调高度不使用定位顶不到上面？？？*/
            cursor:pointer;
         }
         .header_search_downlist{
            width:66px;
            height:75px;
            background-color: #ffffff;
            box-shadow:3px 3px 5px rgba(0,0,0,.2);
            position:absolute;
            left:2px;
            top:38px;
            display:none;
         }
         .header_search_downlist a{
            display: block;
            width:66px;
            line-height: 24px;
            height:24px;
            text-decoration: none;
            text-align: center;
            color:#a5a2a2;
            font-size: 14px;
         }
         .header_search_downlist a:hover{
            background-color: #ebeef5;
         }
         /*导航*/
         .nav{
            width:100%;
            background-color: #60bff2;
            font-size: 17px;
         }
         .nav_wrap{
            width:1000px;
            height:36px;
            margin:0 auto; 
         }
         .nav_wrap_left{
            height:36px;
            width:600px;
            float:left;
            padding-left:55px;
         }
         .nav_wrap_left_item{
            display:inline-block;
            height:36px;
            line-height: 36px;
            padding:0 8px;
            margin:0 10px;
            text-decoration: none;
            color:#ffffff;
         }
         .nav_wrap_left_item_focus{
            background-color: #1fa4f0;
         }
         a.nav_wrap_right{
            width:105px;
            height:36px;
            line-height: 36px;
            display: block;
            float:right;
            text-decoration: none;
            color:#ffffff;
         }

         /*主体部分*/
         .main{
            width:1000px;
            margin:0 auto;
            overflow:hidden;
         }
         .main_tab{
            background: url(http://climg.mukewang.com/58c61a4f0001967a01380030.jpg) center left no-repeat;
            width:138px;
            height:30px;
            line-height: 30px;
            text-indent:20px;
            margin-top:20px;
            font-size:15px;
            color:#ffffff;
         }
         .main_menu{
            border-top:2px solid #49a6d8;
            border-left:1px solid #dcdddd;
            border-right:1px solid #dcdddd;
            border-bottom:1px solid #dcdddd;
            width:998px;
            overflow:hidden;
            position:relative;
         }
         .main_menu_wrap{
            width:800px;
         }
         .hidden{
            display:none;
         }
         .main_menu_items{
            display:block;
            float:left;
            height:36px;
            line-height:36px;
            width:130px;
            text-decoration: none;
            color:#555555;
            text-indent:20px;
         }
         .extend{
            position:absolute;
            top:42px;
            right:100px;
         }
         /*aside*/
         .main_aside{
            margin-top:20px;
            width:210px;
            border:1px solid #dcdddd;
            float:left;
         }
         .main_aside_items{
            display:block;
            width:180px;
            margin:0 auto;
            text-indent:30px;
            position:relative;
            text-decoration: none;
            height:34px;
            line-height: 34px;
            color:#555555;
         }
         .main_aside .logo{
            width:22px;
            height:22px;
            display:block;
            position: absolute;
            left: 0;
            top: 5px;
            background: url(http://climg.mukewang.com/58c61b610001c58300440638.jpg) 0 0 no-repeat;
         }
         .main_aside_items::after{
            content: '>';
            display: block;
            color:#cacaca;
            width: 22px;
            height: 21px;
            position: absolute;
            right: 20px;
            top: 0px;
            font-size: 18px;
        }
        .main_aside_items:hover{
            background-color: #1fa4f0;
        }
        .main_aside_items:hover .logo{
            background-position-x:-22px; 
        }
        /*content*/
        .main_content{
            width:768px;
            margin-top:20px;
            border:1px solid #dcdddd;
            float:right;
            padding-top:10px;
        }
        .main_content_items{
            width:708px;
            margin:10px auto;
        }
        .main_content_items_header{
            width:708px;
            height:36px;
            line-height: 36px;
            border-bottom:1px dashed #dcdddd;      
        }
        .main_content_items_header a{
            text-decoration: none;
            color:#00b3ea;
        }
        .main_content_items_content{
            width:708px;
            line-height:36px;
        }
        .main_content_items_content a{
            display:inline-block;
            width:120px;
            text-decoration: none;
            color:#777777;
            padding-left:10px;
        }
        /*footer*/
        .footer{
            width:100%;
            background-color:#eceef2;
            height:70px;
            color:#acacac; 
            text-align: center;
            line-height: 70px;
        }


    </style>
</head>
<body>
    <div>
        <!--此处填写HTML代码-->
      <div class="top">
          <div class="top_wrap">
              <div class="top_wrap_left">010-114/116114电话预约</div>
              <div class="top_wrap_right">
                  欢迎来到城市预约挂号统一平台&nbsp;请&nbsp;&nbsp;<a href="#">登录</a>&nbsp;&nbsp;<a href="#">注册</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">帮助中心</a>
              </div>
          </div>
      </div>

      <div class="header">
          <div class="header_logo"></div>
          <div class="header_search-wrap">
          <div class="header_search">
              <div class="header_search_left">医院</div>
              <input class="header_search_input" type="text" placeholder="请输入搜索内容">
              <div class="header_search_right">&nbsp;</div>
              <div class="header_search_downlist" id="downlist">
                  <a href="#">科室</a>
                  <a href="#">疾病</a>
                  <a href="#">医院</a>
              </div>
          </div>
          </div>
      </div>

      <div class="nav">
          <div class="nav_wrap">
              <div class="nav_wrap_left">
                 <a href="#" class="nav_wrap_left_item">首页</a>
                 <a href="#" class="nav_wrap_left_item">按医院挂号</a>
                 <a href="#" class="nav_wrap_left_item nav_wrap_left_item_focus">按科室挂号</a>
                 <a href="#" class="nav_wrap_left_item">按疾病挂号</a>
                 <a href="#" class="nav_wrap_left_item">最新公告</a>
              </div>
              <a href="#" class="nav_wrap_right">社会知名医院</a>
          </div>
      </div>

      <div class="main">
          <div class="main_tab">热门科室</div>
          <div class="main_menu">
              <div class="main_menu_wrap">
                <a href="#" class="main_menu_items">神经外科</a>
                <a href="#" class="main_menu_items">妇科</a>
                <a href="#" class="main_menu_items">产科</a>
                <a href="#" class="main_menu_items">儿科</a>
                <a href="#" class="main_menu_items">骨科</a>
                <a href="#" class="main_menu_items">眼科</a>
                <a href="#" class="main_menu_items">耳鼻喉</a>
                <a href="#" class="main_menu_items">肿瘤外科</a>
                <a href="#" class="main_menu_items">肿瘤综合科</a>
                <a href="#" class="main_menu_items">皮肤美容</a>
                <a href="#" class="main_menu_items">心理咨询科</a>
                <a href="#" class="main_menu_items">中医科</a>
              </div>
              <div class="main_menu_wrap hidden">
                  <a href="#" class="main_menu_items">这科</a>
                  <a href="#" class="main_menu_items">那科</a>
                  <a href="#" class="main_menu_items">什么科</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="#" class="main_menu_items">其他科室</a>
                  <a href="3" class="main_menu_items">其他科室</a> 
              </div>
              <a href="#" class="extend">展开全部</a>
          </div>

        <div class="main_aside">
            
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>内科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>外科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>妇产科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>生殖中心</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>儿科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>骨外科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>眼科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>口腔科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>耳鼻咽喉头颈科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>肿瘤科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>皮肤性病科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>男性学科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>皮肤美容</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>烧伤科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>精神心理科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>中医科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>中西医结合科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>传染病科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>结核病科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>介入医学科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>康复医学科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>运动医学科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>麻醉医学科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>职业病科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>地方病学</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>营养科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>医学影像学</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>病理科</a>
            <a href="#" class="main_aside_items">
                <span class="logo">&nbsp;</span>其他科室</a>    
        </div>

        <div class="main_content">

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>内科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">心血管内科</a>
                  <a href="#">神经内科</a>
                  <a href="#">消化内科</a>
                  <a href="#">内分泌科</a>
                  <a href="#">免疫科</a>
                  <a href="#">呼吸科</a>
                  <a href="#">肾病内科</a>
                  <a href="#">血液科</a>
                  <a href="#">感染内科</a>
                  <a href="#">过敏反应科</a>
                  <a href="#">老年病科</a>
                  <a href="#">普通内科</a>
                  <a href="#">高压氧科</a>
              </div>
            </div> 

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>外科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">神经外科</a>
                  <a href="#">功能神经外科</a>
                  <a href="#">心血管外科</a>
                  <a href="#">胸外科</a>
                  <a href="#">整形科</a>
                  <a href="#">乳腺外科</a>
                  <a href="#">泌尿外科</a>
                  <a href="#">肝胆外科</a>
                  <a href="#">肛肠科</a>
                  <a href="#">血管外科</a>
                  <a href="#">器官移植</a>
                  <a href="#">微创外科</a>
                  <a href="#">普外科</a>
                  <a href="#">烧伤科</a>
                  <a href="#">脑外科</a>
              </div>
            </div> 
            
            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>妇产科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">妇科</a>
                  <a href="#">产科</a>
                  <a href="#">妇科内分泌</a>
                  <a href="#">妇泌尿科</a>
                  <a href="#">遗传咨询科</a>
                  <a href="#">计划生育科</a>
                  <a href="#">妇产科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>生殖中心</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">生殖中心</a>
              </div>
            </div> 

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>儿科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">儿科</a>
                  <a href="#">新生儿科</a>
                  <a href="#">小儿呼吸科</a>
                  <a href="#">小儿营养保健科</a>
                  <a href="#">小儿心内科</a>
                  <a href="#">小儿皮肤科</a>
                  <a href="#">小儿精神科</a>
                  <a href="#">小儿外科</a>
                  <a href="#">小儿心外科</a>
                  <a href="#">小儿骨科</a>
                  <a href="#">小儿神经外科</a>
                  <a href="#">小儿康复科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>骨外科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">骨科</a>
                  <a href="#">脊柱外科</a>
                  <a href="#">手外科</a>
                  <a href="#">创伤骨科</a>
                  <a href="#">骨关节科</a>
                  <a href="#">矫形骨科</a>
                  <a href="#">骨质疏松科</a>
                  <a href="#">骨伤专科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>眼科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">眼科</a>
                  <a href="#">小儿眼科</a>
                  <a href="#">眼底</a>
                  <a href="#">角膜科</a>
                  <a href="#">青光眼</a>
                  <a href="#">白内障</a>
                  <a href="#">眼外伤</a>
                  <a href="#">眼眶及肿瘤</a>
                  <a href="#">屈光</a>
                  <a href="#">眼整形中医眼科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>口腔科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">口腔科</a>
                  <a href="#">颌面外科</a>
                  <a href="#">正畸科</a>
                  <a href="#">牙体牙髓科</a>
                  <a href="#">牙周科</a>
                  <a href="#">口腔黏膜科</a>
                  <a href="#">儿童口腔科</a>
                  <a href="#">口腔修复科</a>
                  <a href="#">种植科</a>
                  <a href="#">口腔预防科</a>
                  <a href="#">口腔特诊科</a>
                  <a href="#">口腔急诊科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>耳鼻咽喉头颈科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">耳鼻喉</a>
                  <a href="#">头颈外科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>肿瘤科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">肿瘤内科</a>
                  <a href="#">肿瘤外科</a>
                  <a href="#">肿瘤妇科</a>
                  <a href="#">放疗科</a>
                  <a href="#">骨肿瘤科</a>
                  <a href="#">肿瘤康复科</a>
                  <a href="#">肿瘤综合科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>皮肤性别科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">皮肤科</a>
                  <a href="#">性病科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>男性学科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">男性学科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>皮肤美容</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">皮肤美容</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>烧伤科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">烧伤科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>精神心理科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">精神科</a>
                  <a href="#">心理咨询科</a>
                  <a href="#">司法鉴定科</a>
                  <a href="#">双相障碍科</a>
                  <a href="#">药物依赖科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>中医科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">中医妇产科</a>
                  <a href="#">中医儿科</a>
                  <a href="#">中医骨科</a>
                  <a href="#">中医皮肤科</a>
                  <a href="#">中医内分泌科</a>
                  <a href="#">中医消化科</a>
                  <a href="#">中医呼吸科</a>
                  <a href="#">中医肾病内科</a>
                  <a href="#">中医免疫内科</a>
                  <a href="#">中医心内科</a>
                  <a href="#">中医神经内科</a>
                  <a href="#">中医肿瘤科</a>
                  <a href="#">中医血液科</a>
                  <a href="#">中医肝病科</a>
                  <a href="#">中医五官科</a>
                  <a href="#">中医男科</a>
                  <a href="#">针灸科</a>
                  <a href="#">中医按摩科</a>
                  <a href="#">中医外科</a>
                  <a href="#">中医乳腺外科</a>
                  <a href="#">中医肛肠科</a>
                  <a href="#">中医老年病科</a>
                  <a href="#">中医科</a>
                  <a href="#">中医内科</a>
                  <a href="#">中医脾胃科</a>
                  <a href="#">膏方门诊</a>
                  <a href="#">计中医骨伤科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>中西医结合科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">中西医结合科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>传染病科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">肝病科</a>
                  <a href="#">传染科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>结核病科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">结核病科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>介入医学科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">介入医学科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>康复医学科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">康复科</a>
                  <a href="#">理疗科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>运动医学科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">运动医学科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>麻醉医学科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">疼痛科</a>
                  <a href="#">麻醉科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>职业病科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">职业病科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>地方病科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">地方病科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>营养科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">营养科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>医学影像学</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">核医学科</a>
                  <a href="#">放射科</a>
                  <a href="#">超声科</a>
                  <a href="#">医学影像科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>病理科</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">病理科</a>
              </div>
            </div>

            <div class="main_content_items">
              <div class="main_content_items_header">
                  <a href='#'>其他科室</a>
              </div>
              <div class="main_content_items_content">
                  <a href="#">急诊科</a>
                  <a href="#">特色医疗科</a>
                  <a href="#">干部诊疗科</a>
                  <a href="#">重症监护室</a>
                  <a href="#">特诊科</a>
                  <a href="#">检验科</a>
                  <a href="#">预防保健科</a>
                  <a href="#">功能检查科</a>
                  <a href="#">全科</a>
                  <a href="#">体检科</a>
                  <a href="#">血透中心</a>
                  <a href="#">实验中心</a>
                  <a href="#">碎石中心</a>
                  <a href="#">变态反应科</a>
              </div>
            </div>
        </div>
           
          </div>
      </div>

      <div class="footer">Copyright © 2017慕课网版权所有</div>

    </div>
    <script>
//此处填写jQuery代码

// aside背景图片显示
$.fn.UiImg=function(){

    var ui=$(this);   //限定范围，减少查找负担
    var logo=$('.logo',ui);

    for (var i=0;i<logo.size();i++) {
    var pos=i*(-22)+'px';
    logo.eq(i).css({'background-position-y':pos});
}
}

//搜索
var downlist=document.getElementById('downlist');
$.fn.UiSearch=function(){
    var ui=$(this);
    var select=$('.header_search_left',ui);
    
    var option=$('.header_search_downlist>a',ui);
  
    select.on('click',function(){
       if(downlist.style.display=="none"){ //jQuery这里怎么写？
       downlist.style.display="block";
       }else{
       downlist.style.display="none"; 
       }
    });
    
    option.on('click',function(){
       var content=option.eq($(this).index()).text();
       select.text(content);
       downlist.style.display="none";
    });
    //点击后列表收起来
    $(document).on('click',function(){
       if(!$(event.target).is(select)) //排除当前点击是select
       downlist.style.display="none";
       
    });
}

//展开内容和收起
$.fn.UiExtend=function(){
    var extend=$('.extend');
    var hidbox=$('.main_menu_wrap')[1];
    console.log(hidbox);
    extend.on('click',function(){
        if(extend.text()=="展开全部"){
             hidbox.style.display="block";  
             //这里为何又不能用.css和addClass？？
             extend.text("收起内容");
        }else{
             hidbox.style.display="none";
             extend.text("展开全部");
        }
    })
}

// 页面的脚本逻辑

$(function () {

$('.header_search').UiSearch();

$('.main_menu').UiExtend();

$('.main_aside_items').UiImg();

});
    </script>
</body>
</html>
老师你好，我这边遇到几个问题
95行css 这里的div不通过定位，顶不到上面，为什么
859和886行js 里面该用原生写法还是jQ搞不清楚了，请问纯js或者纯jQ怎么写。每次看别人写和老师讲课，看的懂，到自己写，写出来就是半原生半jQ......
写回答
3回答
好帮手慕言
2019-09-14
已采纳
同学你好，效果是不正确的哦，
点击下拉列表里面的内容，医院两个字不会被替换，下拉列表也不会消失
原因是return后面的代码是不会执行的。
建议：可以把return放在代码最后面。
另外在第二次(第三次，第四次...)点击时要点击两下才可以。
建议：下拉列表隐藏时，将onoff修改为true。
代码参考：
祝学习愉快~
hlleeeee
h 解决了，最后一个事件加上onoff=true;就可以了，谢谢老师
h019-09-15
共2条回复
好帮手慕码
2019-09-15
同学你好！
关于下拉框的代码写的有一些繁琐，而且又bug。可以优化：
同学可以修改测试一下。
如果帮助到了你，欢迎采纳，祝学习愉快~
hlleeeee
h 谢谢老师，已解决
h019-09-15
共2条回复
好帮手慕言
2019-09-14
同学你好，关于同学的问题解答如下
1、因为inline-block是关于基线对齐的，因此不能在最上方。
建议：给类名为header_search_right元素设置vertical-align: top;
2、使用jq，让下拉框显示出来可以参考下面：
3、因为这里是要改变里面的文字，因此要是用jq里面的text方法。
4、搜索框的边框没有完全显示。
建议：去掉类名为header_search_left元素的margin-top值。
混淆说明同学对这块内容理解的不够透彻，学习也是有一个过程的，慢慢来，不要着急
如果帮助到了你，欢迎采纳~祝学习愉快~
hlleeeee
h // aside背景图片显示 $.fn.UiImg=function(){ var ui=$(this); //限定范围，减少查找负担 var logo=$('.logo',ui); for (var i=0;i<logo.size();i++) { var pos=i*(-22)+'px'; logo.eq(i).css({'background-position-y':pos}); } } //搜索下拉表 $.fn.UiSearch=function(){ var ui=$(this); var select=$('.header_search_left',ui); var onoff=true; var option=$('.header_search_downlist>a',ui); select.on('click',function(){ if(onoff==true){ $('#downlist').show(); onoff=false; }else{ $('#downlist').hide(); onoff=true; } return false; //禁止冒泡 }); option.on('click',function(){ var content=option.eq($(this).index()).text(); select.text(content); $('#downlist').hide(); }); //点击后列表收起来 $(document).on('click',function(){ if(!$(event.target).is(select)) //排除当前点击是select $('#downlist').hide(); }); } //展开内容和收起 $.fn.UiExtend=function(){ var extend=$('.extend'); var hidbox=$('.hidden'); extend.on('click',function(){ if(extend.text()=="展开全部"){ hidbox.show(); extend.text("收起内容"); }else{ hidbox.hide(); extend.text("展开全部"); } }) } // 页面的脚本逻辑 $(function () { $('.header_search').UiSearch(); $('.main_menu').UiExtend(); $('.main_aside_items').UiImg(); }); 老师，看看我改的可以吗
h019-09-14
共1条回复
0 学习 · 14456 问题
查看课程
相似问题
原生js用return false
回答 1
回答 2
原生js获取css属性值的问题
回答 1
JQ源码问题
回答 1
回答 2
打开慕课网App查看更多内容