体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

关于隐藏显示下拉列表

来源：3-10 作业题

super星光

2019-11-12 16:44:54

老师，我点击我的IMOO可以弹出下拉列表，不过我想向下点下拉列表的话它又马上消失了，点不到下拉列表，这个问题怎么解决？

附上代码：


html部分

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Index</title>

    <link rel="stylesheet" href="styles/index.css">

</head>

<body>

    <!--头部-->

    <header>

        <div id="header_wrap">

            <div id="header_wrap_left">

                <h1 id="header_wrap_left_logo">慕课高铁客户服务中心&nbsp;|&nbsp;<span>客户服务</span></h1>

            </div>

            <div id="header_wrap_right">

                <p>意见反馈&nbsp;<span>imooc@com</span>&nbsp;&nbsp;&nbsp;您好，请&nbsp;<span>登录</span>&nbsp;&nbsp;|&nbsp;&nbsp;注册</p>

                <b id="my_imooc">我的IMOOC&nbsp;▼</b>

                <!--下拉列表-->

                <div id="order_list">

                    <div class="content content_one">

                        <a href="javascript:void(0);">未完成订单</a><br>

                        <a href="javascript:void(0);">已完成订单 ( 改/退 )</a>

                    </div>

                    <div class="content content_two">

                        <a href="javascript:void(0);">我的保险</a>

                    </div>

                    <div class="content content_three">

                        <a href="javascript:void(0);">查看个人信息</a><br>

                        <a href="javascript:void(0);">账户安全</a>

                    </div>

                    <div class="content content_four">

                        <a href="javascript:void(0);">常用联系人</a>

                    </div>

                    <div class="content content_five">

                        <a href="javascript:void(0);">重点旅客预约</a><br>

                        <a href="javascript:void(0);">遗失物品查找</a>

                    </div>

                    <div class="content content_six">

                        <a href="javascript:void(0);">服务查询</a>

                    </div>

                    <div class="content content_seven">

                        <a href="javascript:void(0);">投诉</a><br>

                        <a href="javascript:void(0);">建议</a>

                    </div>

                </div>

                <div id="phone_icon">手机版</div>

            </div>

        </div>

    </header>

    <!--主体-->

    <div id="main">

        <p id="main_header">您现在的位置：<span>&nbsp;客运首页&nbsp;>&nbsp;注册</span></p>

        <div id="user_information">

            <div id="user_information_header">账户信息</div>

            <form action="" method="get">

                <div class="item">

                    <span class="important">*</span>

                    <label for="userAccount">用&nbsp;&nbsp;户&nbsp;名 :</label>

                    <input type="text" id="userAccount" placeholder=" 用户设置成功后不可修改">

                    <p class="item_"></p>

                </div>

                <div class="item">

                    <span class="important">*</span>

                    <label for="passWord">登陆密码 :</label>

                    <input type="text" id="passWord" placeholder=" 6-20为字母，数字或符号">

                    <p class="item_">

                        <span class="passWord_line passWord_line_one"></span>

                        <span class="passWord_line passWord_line_two"></span>

                        <span class="passWord_line passWord_line_three"></span>

                    </p>

                </div>

                    <div class="item">

                    <span class="important">*</span>

                    <label for="passWord_">确认密码 :</label>

                    <input type="text" id="passWord_" placeholder=" 再次输入您的登陆密码">

                    <p class="item_"></p>

                </div>

                    <div class="item">

                    <span class="important">*</span>

                    <label for="userName">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名 :</label>

                    <input type="text" id="userName" placeholder=" 请输入姓名">

                    <p class="item_"></p>

                </div>

                    <div class="item">

                    <span class="important">*</span>

                    <label for="idType">证件类型 :</label>

                    <select name="idType" id="idType">

                        <option value="二代身份证">二代身份证</option>

                        <option value="港澳通行证">港澳通行证</option>

                        <option value="台湾通行证">台湾通行证</option>

                        <option value="护照">护照</option>

                    </select>

                </div>

                    <div class="item">

                    <span class="important">*</span>

                    <label for="idNumber">证件号码 :</label>

                    <input type="text" id="idNumber" placeholder=" 请输入您的证件号码">

                    <p class="item_"></p>

                </div>

                <div class="item">

                    <span class="important">&nbsp;</span>

                    <label for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱 :</label>

                    <input type="email" id="email" placeholder=" 请正确填写邮箱地址">

                    <p class="item_"></p>

                </div>

                <div class="item">

                    <span class="important">*</span>

                    <label for="phoneNumber">手机号码 :</label>

                    <input type="text" id="phoneNumber" placeholder=" 请输入您的手机号码">

                    <p class="item_"></p>

                </div>

                <div class="item">

                    <span class="important">*</span>

                    <label for="userType">旅客类型 :</label>

                    <select name="userType" id="userType">

                        <option value="成人">成人</option>

                        <option value="学生">学生</option>

                        <option value="残疾军人">残疾军人</option>

                        <option value="伤残人民警察">伤残人民警察</option>

                    </select>

                </div>

                <div class='end' id="end">

                    <input type="checkbox" id="choose">

                    <label for="choose">我已阅读并同意遵守<a href="javascript:void(0);">《中国铁路客户服务中心网站服务条款》</a></label>

                </div>

 

                <div class="submit"><input id="submit" type="submit" value="下一步"></div>

            </form>

        </div>

    </div>

    <!--页脚-->

    <footer>

        <p id="footer_text_top">关于我们|网站声明</p>

        <p id="footer_text_bottom">Copyright &copy; 2017 imooc.com All Rights Reserved | 京ICP备 13046642号-2</p>

    </footer>

    <script type="text/javascript" src="javascripts/index.js"></script>

</body>

</html>


css部分

*{margin:0; padding:0;}

a{text-decoration:none;}


/*头部*/

header{background:rgb(239,239,239); height:125px; background-size:cover; border-bottom:2px solid rgb(36,135,201);}

#header_wrap{width:1260px; margin:0 auto;}

#header_wrap_left{float:left;}

#header_wrap_left_logo{height:110px; margin-top:7px; background:url(../imgs/logo.png) no-repeat left center; line-height:110px; padding-left:120px;

   font-size:24px; font-weight:lighter;}

#header_wrap_left_logo span{color:rgb(102,102,102); font-size:16px;}

#header_wrap_right{float:right; height:24px; margin-top:50px; font-size:16px; line-height:24px; position:relative;}

#header_wrap_right p,#header_wrap_right #my_imooc,#header_wrap_right #phone_icon{float:left;}

#header_wrap_right span{color:rgb(251,116,3);}

#header_wrap_right #my_imooc{display:inline-block; margin-left:22px;}

#header_wrap_right #order_list{width:152px; position:absolute; left:360px; top:38px; font-size:14px; line-height:28px; padding:16px 16px 0;

   border:1px solid rgb(251,116,3); background:#fff; display:none; opacity:0; transition:all .5s ease-in-out;}

#header_wrap_right #order_list .content{padding:0 13px 0; border-bottom:dotted 1px rgb(128,128,128);}

#header_wrap_right #order_list .content:last-child{border-bottom:none;}

#header_wrap_right #order_list .content a{color:rgb(128,128,128);}

#header_wrap_right #order_list .content a:hover{color:rgb(251,116,3);}

#header_wrap_right #phone_icon{margin-left:48px; padding-left:22px; background:url(../imgs/未标题-1.png) no-repeat left center;

   background-size:18px 24px;}


/*主体*/

#main{width:1260px; margin:0 auto;}

#main_header{font-size:20px; margin:18px 0;}

#main_header span{color:rgb(144,144,144);}

#main #user_information{width:1260px; margin-bottom:127px; border:1px solid rgb(251,116,3); border-radius:5px;}

#main #user_information #user_information_header{background:rgb(251,116,3); height:44px; color:#fff; font-size:20px;

                                             text-indent:16px; line-height:44px; border-radius:5px;}

#main #user_information form{margin:50px 0 78px 288px;}

#main #user_information .item{margin-bottom:16px;}

#main #user_information .item .important{color:rgb(251,116,3);}

#main #user_information .item input,#main #user_information .item select{margin-left:16px;}

#main #user_information .item .item_{display:inline-block; margin-left:15px; font-size:14px;}

/*#main #user_information .item .item_ .passWord_line{display:inline-block; width:42px; height:8px; background:red;}*/

#main #user_information #end{margin-left:106px; font-size:18px; line-height:18px;}

#main #user_information #end a{color:rgb(8,110,225);}

#main #user_information #submit{width:232px; height:38px; border:none; margin-left:129px; margin-top:66px; border-radius:5px;

    background:rgb(251,116,3); color:#fff; font-size:18px; line-height:18px;}


/*页脚*/

footer{background:rgb(239,239,239); height:105px; border-top:2px solid rgb(36,135,201); font-size:16px; text-align:center; line-height:36px; 

   color:rgb(165,165,165);}

#footer_text_top{margin-top:15px;}


js部分

//封装获取元素

function getEle(id){

return document.getElementById(id);

}

var ele={

"myImooc":getEle("my_imooc"),

"orderList":getEle("order_list")

};

ele.myImooc.onmouseover=function(){

this.style.cursor="pointer";

ele.orderList.style.opacity="1";

ele.orderList.style.display="block";

};

ele.myImooc.onmouseout=function(){

ele.orderList.style.opacity="0";

ele.orderList.style.display="none";

};


写回答

2回答

好帮手慕言

2019-11-12

已采纳

同学你好，可以给“我的IMOOC ▼”和下拉列表添加一个父级，将事件绑定到父级上。

代码参考：

html

http://img.mukewang.com/climg/5dca77870906c69000000000.jpgcss：

http://img.mukewang.com/climg/5dca78aa092fb31109080802.jpg

js：

http://img.mukewang.com/climg/5dca78e3091aa2b705990502.jpg

同学可以修改后再测试下。

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

1
huper星光
h 老师，按你说的方法现在可以了，不过我想让它产生透明渐变的效果，请问该怎么实现？
h019-11-12
共1条回复

好帮手慕言

2019-11-13

同学你好，透明渐变的效果使用css就可以完成（js部分可以去掉）。

如下参考：

http://img.mukewang.com/climg/5dcb600a098b645b05710544.jpg

http://img.mukewang.com/climg/5dcb5f3109394b8404420410.jpg

同学可以测试下。这个地方没有要求透明渐变的效果，同学使用display:none和display:block就可以

如果还有其他疑问，建议在问答区重新提问，便于同学后期查找总结

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0

0 学习 · 14456 问题

查看课程

相似问题

老师，请问一下

回答 3

关于显示列表的问题

回答 6

关于脚本要求的内容

回答 2

1.我的IMOOC下拉列表和姓名填写规则，鼠标移出后没来得及移入列表就消失 2.密码强度验证

回答 1

下拉列表怎么没效果呢，还有箭头怎么加，这个下拉用select标签能做吗

回答 2

打开慕课网App查看更多内容