老师,我写的我的imooc下拉框老是有问题

老师,我写的我的imooc下拉框老是有问题

html 

<div class="select_imooc" id="select_imooc">

<span>我的imooc ▼</span>

<!-- imooc下拉 -->

<ul class="select_imooc_item" id="select_imooc_item">

<li class="select_items">未完成订单</li>

<li class="select_items">已完成订单(退/改)</li>

<li class="select_items">我的保险</li>

<li class="select_items">查看个人信息</li>

<li class="select_items">账户安全</li>

<li class="select_items">常用联系人</li>

<li class="select_items">重点旅客预约</li>

<li class="select_items">遗失物品查找</li>

<li class="select_items">服务查询</li>

<li class="select_items">投诉</li>

<li class="select_items">建议</li>

</ul>

</div>

css

/*下拉框*/

.select_imooc{

float: right;

position: relative;

color: black;

padding:0 30px 0 5px;

}

/*下拉框ul*/

.select_imooc_item{

display: none;

position: absolute;

padding:15px 0 15px 0;

    top: 100px;

    left: 0;

    list-style: none;

    line-height: 25px;

    font-size: 12px;

    background: white;

    color: gray;

    border: 1px solid #fb7403;

}

/*下拉框li*/

.select_items{

padding: 2px 10px;

}


.select_items:hover{

color: black;

}


.select_items:nth-child(3n){

border-top: 1px dashed gray;

border-bottom: 1px dashed gray;

}

js

//下拉框挂移入事件

addHandler(select_imooc,'mouseover',function(){

event.stopPropagation();

this.style.color = '#03fb16';

selectUl.style.display = 'block';

})


addHandler(select_imooc,'mouseout',function(){

// event.stopPropagation();

this.style.color = '#000';

selectUl.style.display = 'none';

})

没有报错 但是我每次移入显示出的下拉框列表时 总是在移到服务查询这一项时 下拉列表就消失了 我还没有移出下拉列表 服务查询这一项的下面还有两项 我看了好几遍也不知道问题出在哪里

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

3回答
好帮手慕码 2020-02-24 11:16:27

同学你好,使用同学提供的完整代码测试,效果如下:

http://img1.sycdn.imooc.com//climg/5e5329940955b1e101410416.jpg

无法复现“我每次移入显示出的下拉框列表时 总是在移到服务查询这一项时 下拉列表就消失了”的效果,修改如下:

http://img1.sycdn.imooc.com//climg/5e5329d809583d1203190476.jpg

效果:

http://img1.sycdn.imooc.com//climg/5e5329e4097205c301280363.jpg

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

好帮手慕码 2020-02-23 09:47:30

同学你好,老师测试的问题和同学描述的不一致:

http://img1.sycdn.imooc.com//climg/5e51d96109c6376201260408.jpg

无法移入下拉框的效果,可能有其他代码的影响,针对“总是在移到服务查询这一项时 下拉列表就消失了”这个问题,建议:给下拉框通过z-index提高层级。如果还是不行的话,建议将所有html,css代码粘贴到问答区进行提问,老师帮助测试,准确定位问题所在。

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

  • 提问者 慕虎6206582 #1
    你好 我漏了一些js 完整版js //绑定事件 function addHandler(ele,type,handler){ if (ele.addEventListener) { ele.addEventListener(type,handler); }else if(ele.attachEvent){ ele.attachEvent("on"+type,handler); }else{ ele["on"+type]=handler; } } var selectImooc = document.getElementById('select_imooc'); var selectUl = document.getElementById('select_imooc_item'); //下拉框挂移入事件 addHandler(select_imooc,'mouseover',function(){ event.stopPropagation(); this.style.color = '#03fb16'; selectUl.style.display = 'block'; }) addHandler(select_imooc,'mouseout',function(){ // event.stopPropagation(); this.style.color = '#000'; selectUl.style.display = 'none'; })
    2020-02-23 22:57:38
好帮手慕星星 2020-02-22 11:30:00

同学你好,这边测试效果如下

http://img1.sycdn.imooc.com//climg/5e50a001093636fd01820508.jpg

移入不到子菜单就隐藏了,无法还原同学的问题。建议将所有html,css代码粘贴上来,老师帮助测试,准确定位问题所在。

祝学习愉快!

  • 提问者 慕虎6206582 #1
    js //绑定事件 function addHandler(ele,type,handler){ if (ele.addEventListener) { ele.addEventListener(type,handler); }else if(ele.attachEvent){ ele.attachEvent("on"+type,handler); }else{ ele["on"+type]=handler; } } var selectImooc = document.getElementById('select_imooc'); var selectUl = document.getElementById('select_imooc_item'); //下拉框挂移入事件 addHandler(select_imooc,'mouseover',function(){ event.stopPropagation(); this.style.color = '#03fb16'; selectUl.style.display = 'block'; }) addHandler(select_imooc,'mouseout',function(){ // event.stopPropagation(); this.style.color = '#000'; selectUl.style.display = 'none'; })
    2020-02-22 23:11:56
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师