亚洲青青视频一区|8MAV在线观看|天天看AV天天看|中日成人手机在线|欧美激情五区六区|亚洲婷婷天堂级片|亚洲天堂网7777|欧美日韩其他另类|手机在线成人AV|成人性大片一区二区三区四区五区

有時(shí)候我們需要用到下拉選擇框，來(lái)做跳轉(zhuǎn)。我們提供兩個(gè)方法。

**個(gè)方法就是原生的下拉框：

<div class="footer-select">
<select class="footer_sel" id="FriendLink">
<option selected="selected" value="#">請(qǐng)選擇</option>
<option  value="http://www.zuoan.com.cn/">黑馬視覺(jué)</option>
<option value="http://www.509k.com">成都網(wǎng)站建設(shè)</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>

這種方法的缺點(diǎn)就是樣式下拉框中的樣式?jīng)]法調(diào)整，是原生態(tài)的效果。

第二種方法：使用LAYUI的下拉

步驟：

1：引入CSS和JS

2：寫(xiě)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:;">請(qǐng)選擇你要查看的內(nèi)容</a>

        <dl class="layui-nav-child">
 <dd><a href="http://www.zuoan.com.cn">黑馬視覺(jué)</a></dd>
<dd><a href="http://www.zuoan.com.cn">黑馬視覺(jué)</a></dd>	 
 <dd><a href="http://www.zuoan.com.cn">黑馬視覺(jué)</a></dd>
<dd><a href="http://www.zuoan.com.cn">黑馬視覺(jué)</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：根據(jù)自己的需求修改CSS，比如說(shuō)修改的：

<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>

以上兩種方法，當(dāng)然我們推薦第二種，更靈活一些。