这次给大家带来利用JS实现下拉框功能，利用JS实现下拉框功能的注意事项有哪些，下面就是实战案例，一起来看一下。
="content-type"content=> => *{padding: 0;margin:0;} ul,li{list-style: none} .left{float: left;} .right{float: right;} .select_contain{font-size: 14px;color: #333;line-height: 38px;margin: 30px 0;} .select_item{margin-right: 50px;position: relative;} .select_tit{margin-right: 20px;} .select_result{width: 100px;line-height: 38px;border:1px solid #ccc;text-align: center;border-radius: 4px;text-indent: -8px;cursor:pointer;} .select_result .triangle{border:5px solid transparent;border-top:5px solid #666;position: absolute;top: 16px; right:8px;} .select_item ul{display:none;position:absolute;top:100%;right:0;width:100px;background: #f3f3f3;border:1px solid #ccc;border-radius:0 0 4px 4px; border-top-color:#f3f3f3;margin-top:-4px;} .select_item ul li{text-align: center;cursor: pointer;} .select_item ul li:hover{background: #f4a100; color: #fff;} => function select(){$(document).click(function(){$(".select_module_con ul").slideUp();})var module=$(".select_result");module.click(function(e){e.stopPropagation();var ul=$(this).next();ul.stop().slideToggle();ul.children().click(function(e){e.stopPropagation();$(this).parent().prev().children("span").text($(this).text());ul.stop().slideUp();})})}$(function(){select();}) ="select_contain"> => => => ="select_result"> 选择节目 ="triangle">
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
Angular2开发组件步奏详解
Ajax处理用户session失效
怎么处理http被劫持浮动广告
以上就是利用JS实现下拉框功能的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2770623.html
