一款兼容性不错div模拟select下拉菜单

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
	.mod_select{position:absolute;left:30%;top:100px;font-familY:Arial, Helvetica, sans-serif;}
	.mod_select ul{margin:0;padding:0;}
	.mod_select ul li{list-style-type:none;float:left;margin-left:20px;}
	.select_label{color:#982F4D;float:left;line-padding-right:10px;font-size:12px;font-weight:700;}
	.select_box{float:left;border:solid 1px #EDE7D6;color:#444;position:relative;cursor:pointer;background:url(../select_bg.jpg) repeat-x;font-size:12px;}
	.selet_open{display:inline-block;border-left:solid 1px #E5E5E5;position:absolute;right:0;top:0;background:url(../select_up.jpg) no-repeat center center;}
	.select_txt{display:inline-block;padding-left:10px;line-cursor:text;overflow:hidden;}
	.option{;border:solid 1px #EDE7D6;position:absolute;top:24px;left:-1px;z-index:2;overflow:hidden;display:none;}
	.option a{display:block;line-text-align:left;padding:0 10px;width:100%;background:#fff;}
	.option a:hover{background:#FDE0E5;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function(){
			$(".select_box").click(function(event){   
				event.stopPropagation();
				$(this).find(".option").toggle();
				$(this).parent().siblings().find(".option").hide();
			});
			$(document).click(function(event){
				var eo=$(event.target);
				if($(".select_box").is(":visible") && eo.attr("class")!="option" && !eo.parent(".option").length)
				$('.option').hide();									  
			});
			/*赋值给文本框*/
			$(".option a").click(function(){
				var value=$(this).text();
				$(this).parent().siblings(".select_txt").text(value);
				$("#select_value").val(value)
			 })
		})
</script>
</head>
<body>
<div class="mod_select">
	<ul>
    	<li>
            <span class="select_label">sort buy:</span>
            <div class="select_box">
            	<span class="select_txt"></span><a class="selet_open"><b></b></a>
            	<div class="option">
                	<a>1</a>
                    <a>2</a>
                    <a>3</a>                            </div>
        </div>
            </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>相关文章</h2>
        </div>
        <ul class="s-list nobord notop">
                            <li>
                    <a href="/art-424663.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-12-31</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ba51f3b2c1.jpeg" alt="以闪亮之名店长体验流霞季怎么玩 缘溪临霞套装活动介绍" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-424664.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-12-31</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ba526948a1.jpeg" alt="未定事件簿旧梦新生左然篇怎么玩 旧梦新生左然篇活动介绍" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-424662.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">未定事件簿左然破浪远行怎么样</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-12-31</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773b29eb3f551.jpeg" alt="未定事件簿左然破浪远行怎么样" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-424661.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">桃源深处有人家行医问诊怎么玩</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-12-31</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773b29de06411.jpeg" alt="桃源深处有人家行医问诊怎么玩" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-424660.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-12-31</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ac764837c1.jpeg" alt="恋与制作人跨年福利有哪些 恋与制作人跨年福利内容介绍" />
                        </div>
                    </a>
                </li>
                            <li>
                    <a href="/art-424659.htm" class="s-card">
                        <div class="s-card-l">
                            <p class="tit">阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍</p>
                            <div class="info">
                                <span class="person">游戏攻略</span>
                                <span class="time">2024-12-31</span>
                            </div>
                        </div>
                        <div class="s-card-pic">
                            <img src="/images/lazy.gif" data-src="/uploads/20241231/logo_6773ac754a7ec1.jpeg" alt="阴阳师协同对弈大乱斗怎么玩 阴阳师协同对弈大乱斗活动介绍" />
                        </div>
                    </a>
                </li>
                    </ul>
    </section>
    <section class="wrap-box">
        <div class="g-tit">
            <h2>精彩推荐</h2>
        </div>
        <ul class="card-box">
                            <li class="card3">
                    <a href="/app/102825.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dd0127203c1.png" alt="火柴人联盟2 安卓版v1.9.7" />
                        </div>
                        <p class="figure-head">火柴人联盟2 安卓版v1.9.7</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/102817.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dcff166b0c1.png" alt="火柴人联盟2测试版 安卓版v1.9.7" />
                        </div>
                        <p class="figure-head">火柴人联盟2测试版 安卓版v1.9.7</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/102799.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dcfbadf1211.png" alt="火柴人联盟2修改版 安卓版v1.9.7" />
                        </div>
                        <p class="figure-head">火柴人联盟2修改版 安卓版v1.9.7</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card3">
                    <a href="/app/102795.htm" target="_self" class="figure">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dcfaa8e00a1.png" alt="境界死神激斗 安卓版v1.37.6" />
                        </div>
                        <p class="figure-head">境界死神激斗 安卓版v1.37.6</p>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
        <ul class="card-box-b">
                            <li class="card10">
                    <a href="/app/102867.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dd093722c91.png" alt="迷雾城堡免广告 最新版v0.1.30" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">迷雾城堡免广告 最新版v0.1.30</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>迷雾城堡免广告 最新版v0.1.30</span>
                            </div>
                            <div class="figure-desc">
                                <p>迷雾城堡免广告是一款非常好玩的模拟建造类手游，玩家无需看广告</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/102863.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dd08d2c7d41.png" alt="鉴车大师免广告 安卓版v1.2.2" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">鉴车大师免广告 安卓版v1.2.2</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>鉴车大师免广告 安卓版v1.2.2</span>
                            </div>
                            <div class="figure-desc">
                                <p>鉴车大师免广告是一款非常好玩的模拟类手游，玩家在游戏中不用看</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/102858.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dd072af2411.png" alt="从前有条街 安卓最新版v1.5" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">从前有条街 安卓最新版v1.5</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>从前有条街 安卓最新版v1.5</span>
                            </div>
                            <div class="figure-desc">
                                <p>从前有条街是一款非常好玩的模拟经营类手游，玩家在游戏中将会进</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/102855.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dd06bbf8f01.png" alt="我的世界源之界冰火魔龙 最新版v阿夜整合" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">我的世界源之界冰火魔龙 最新版v阿夜整合</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>我的世界源之界冰火魔龙 最新版v阿夜整合</span>
                            </div>
                            <div class="figure-desc">
                                <p>我的世界源之界冰火魔龙模组整合包是一款像素风格的沙河模拟生存</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                            <li class="card10">
                    <a href="/app/102848.htm" target="_self" class="figure2">
                        <div class="figure-box">
                            <img src="/images/lazy.gif" data-src="https://img.111cn.net/uploads/20250108/logo_677dd0578cfbe1.png" alt="假面骑士创骑腰带模拟器 安卓版v6" />
                        </div>
                        <div class="figure-cont">
                            <p class="figure-head">假面骑士创骑腰带模拟器 安卓版v6</p>
                            <div class="figure-desc">
                                <span>模拟经营</span>
                                <span>假面骑士创骑腰带模拟器 安卓版v6</span>
                            </div>
                            <div class="figure-desc">
                                <p>假面骑士创骑腰带模拟器是一个专为喜欢假面骑士的用户打造的变身</p>
                            </div>
                        </div>
                        <span class="figure-btn">下载</span>
                    </a>
                </li>
                    </ul>
    </section>
    <footer class="foot">
    <a href="/" class="logo-icon">
        <img src="/mobile/images/logo2.png" alt="一聚教程网">
    </a>
    <p>Copyright © 2010-2022</p>
    <p>111cn.net All Rights Reserved</p>

</footer>
<script>
    var advData = {"img_fixed_pc_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e9729f58.jpg","img_fixed_mob_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e8793225.jpg","url_adv":"http:\/\/shop.hushen.cn\/shop\/c\/baojianpin.html","str_adv":"\u864e\u795e\u5546\u57ce\uff1a\u5173\u7231\u7537\u6027\uff0c\u66f4\u61c2\u7537\u4eba\u3002\u89e3\u51b3\u5927\u4f17\u7684\u7537\u8a00\u4e4b\u9690","img_popup_adv":"https:\/\/img.111cn.net\/uploads\/20240509\/663c2e748238d.png","pc_show_img":"2","pc_show_popup":"2","pc_show_video":"2","mob_show_img":"2","mob_show_popup":"2","mob_show_video":"2","close_adv":"https:\/\/img.111cn.net\/uploads\/20240508\/663b20650801e.png","video_adv":"\/pc\/images\/pc-adv.mp4"};
</script>
<script src="/jspc/funcmob.js" type="text/javascript"></script>

<script async src="https://www.googletagmanager.com/gtag/js?id=G-DSRRGRV1TL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

gtag('config', 'G-DSRRGRV1TL');
</script>    <div class="back-top" style="display: block;">
        <span class="icon-box">
            <svg class="icon" viewBox="0 0 1024 1024">
                <path d="M213.333333 640h170.666667v256h256v-256h170.666667l-298.666667-341.333333zM170.666667 128h682.666666v85.333333H170.666667z" fill="#0374f3"></path>
            </svg>
        </span>
    </div>
</div>
<script src="/js/stat.js"></script>
</body>
</html>