碼上快樂
1秒登錄
首頁
榜單
標簽
關於
搜索
相關內容
簡體
繁體
div 模擬
事件 本文轉載自 查看原文 2016-09-22 11:32 2491 select>/ option>/ 模擬/ < IE7 下，不能夠自定義<select>/<option>的樣式，所以為了方便起見，用div可以進行模擬 <!doctype html> <html> <meta charset="utf-8"> <title>div模擬select</title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <style type="text/css"> body,html,ul,li{padding:0;margin:0;list-style:none;} .search_btn{margin:30px auto 0;display:block;width:97px; height:38px; line-height:38px; background:#CD0000; border-left:1px solid #CD0000; text-align:center; font-size:14px; color:#fff; cursor:pointer;position:relative;z-index：1} .search_value{overflow:hidden;} .search_value span{float:left;margin-left:12px;} .search_value i{width:10px;height:6px;background:url(images/search_arrow.png) no-repeat;float:right;margin:17px 12px 0 0 } .search_option{width:97px;line-height:30px;text-align:center;color:#000;background:#FCF3F3;display:none;position:absolute;z-index:3;top:38px;left:0;} .search_option a{color:#000;display:block;text-decoration:none;} .search_option a:hover{color:#CD0000;text-decoration:none;} </style> <body> <div class="search_btn"> <div class="search_value"><span>個股體檢</span><i></i></div><!--或者將圖片作為search_value的背景圖--> <div class="search_option"> <a class="search_o" href="javascript:void(0)">個股體檢</a> <a class="search_o" href="javascript:void(0)">查行情</a> </div> </div> <div class="search_btn"> <div class="search_value"><span>個股體檢</span><i></i></div><!--或者將圖片作為search_value的背景圖--> <div class="search_option"> <a class="search_o" href="javascript:void(0)">個股體檢</a> <a class="search_o" href="javascript:void(0)">查行情</a> </div> </div> <script type="text/javascript"> $(".search_value").click(function (evt) { evt.stopPropagation(); //阻止冒泡 $(this).next().show(); $(this).parent().css("z-index","2").siblings().css("z-index","1"); //當前選中的層級最高，防止IE7 下 遇到position:relative 被遮擋 $(this).parent().siblings().find(".search_option").hide(); //隱藏其他的下拉框選項 }); $(".search_option a").click(function(){ $(this).parent().prev().find("span").html($(this).html()); //選中內容填充 $(this).parents("search_btn").css("z-index","1"); $(this).parent().hide(); }); $("body").click(function(){ //點擊頁面其他部分，下拉框消失 $(".search_option").hide(); $(".search_btn").css("z-index","1"); }); </script> </body> </html> 注意事項：1、如果有多個並列，互相之間會相互影響，IE7下，會被遮擋，為避免此問題，所有 設置層級為：1，選中時，層級改為22、<a>標簽，缺少herf屬性的話，IE7下將無hover效果3、使用event.stopPropagation();阻止冒泡，event.preventDefault();阻止默認事件 × 免責聲明！ 本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。 猜您在找 div模擬實現select下拉框 layui問題之模擬select點擊事件 輕松使用div模擬select下拉菜單 用div，ul，input模擬select下拉框 jquery input 下拉框(模擬select控件)焦點事件 div模擬textarea select 模擬插件 關於div的禁止點擊事件 怎樣給div增加resize事件 JS讓DIV綁定某個事件 粵ICP備18138465號 © 2018-2025 CODEPRJ.COM
