有时候我们需要用到下拉选择框,来做跳转。我们提供两个方法。
**个方法就是原生的下拉框:
<div class="footer-select"> <select class="footer_sel" id="FriendLink"> <option selected="selected" value="#">请选择</option> <option value="http://www.zuoan.com.cn/">黑马视觉</option> <option value="http://www.509k.com">成都网站建设</option> </select> </div>
第二步:引入JQ
第三步:
添加JS
<script> (function (window, $) { function init() { bindEvt(); } init(); function bindEvt() { $("#FriendLink").bind("change",function() { var selectedHref = $("#FriendLink :selected").val(); if (selectedHref != "") { window.open(selectedHref); } }); } })(window, jQuery); </script>
这种方法的缺点就是样式下拉框中的样式没法调整,是原生态的效果。
第二种方法:使用LAYUI的下拉
步骤:
1:引入CSS和JS
2:写HTML
<div class="layui-block d-block d-sm-none mb-3"> <ul class="layui-nav layui-bg-gray" lay-filter="test"> <li class="layui-nav-item"> <a href="javascript:;">请选择你要查看的内容</a> <dl class="layui-nav-child"> <dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd> <dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd> <dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd> <dd><a href="http://www.zuoan.com.cn">黑马视觉</a></dd> </dl> </li> </ul> </div>
3:
添加JS
<script> layui.use(['element', 'form'], function(){ var element = layui.element; element.on('nav(test)', function(elem){ console.log(elem) }); }); </script>
4:根据自己的需求修改CSS,比如说修改的:
<style> .layui-block{border:1px solid #ddd;} .layui-nav{padding:0;} .layui-nav .layui-nav-more{right:15px; margin-top: 10px;} .layui-nav .layui-nav-item{display: block; line-height:24px!important; padding:10px 0;} .layui-nav .layui-nav-item a{color:#333!important;} .layui-nav .layui-nav-item:hover{color:#333!important;} .layui-nav-child{top:50px;} </style>
以上两种方法,当然我们推荐第二种,更灵活一些。