ul-li（div）下拉列表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ul-li的下拉列表</title><style>#sel {display: table-cell;}ul#ul {list-style: none;border: 1px solid #ccc;background-color: #fff;display: table-cell;margin: 0;padding: 0;}ul#ul li {height: 22px;line-height: 22px;}ul#ul li:focus {min-height: 1.2em;}ul#ul li:hover {background-color: rgba(12,145,229,.9);color: #fff;}</style>
</head>
<body>
<label for="sel"></label><select name="" id="sel" style="width:50%"></select><ul id="ul"><li>&nbsp;&nbsp;1</li><li>&nbsp;&nbsp;1</li><li>&nbsp;&nbsp;1</li><li>&nbsp;&nbsp;1</li></ul><script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script><script>$("#ul").hide();$("#sel").unbind('click').on("click", function (e) {e.stopPropagation();// 解决有时显示重复问题$("#sel").blur();ulStyle();$("#ul").toggle();});// 点击页面其他区域隐藏下拉列表$(document).on("click",function () {$("#ul").hide();});// 浏览器切换tab页隐藏下拉列表document.addEventListener('visibilitychange', function () {if (document.visibilityState === 'hidden') { // 状态判断$("#ul").hide();}});// ul下拉样式function ulStyle() {$("#ul li").css("width", "auto");$("#ul").css("width", "auto");// 如果宽度太小的话让它等于下拉框宽度if ($("#ul").width() < 359) {$("#ul").css("width", $("#sel").width());}}</script>
</body>
</html>

还有一个问题，浏览器窗口大小改变的时候，ul的宽度等于初始化时下拉列表的宽度，而下拉列表是相对宽度，随窗口大小改变，所以宽度不相等。

ul-li（div）下拉列表相关推荐

CSS-5 列表元素(ol+ul++li+dl+dt+dd)、表格元素、单元格合并、表单元素(input+label+radio+...)、Emmet语法、结构伪类(:nth-child）
目录 1_列表元素 1.1_列表的实现方式 1.2_有序列表 – ol – li 1.3_无序列表 – ul - li 1.4_定义列表 – dl – dt - dd 1.5_ 写前端代码逻辑顺序 2 ...
css案例学习之div ul li a 实现导航效果
效果代码 <html> <head> <title>无需表格的菜单</title> <style>body{background-colo ...
html宽度自适应怎么调整li超出隐藏,HTML篇之CSS样式——div ul li 嵌套后解决高度自适应方法...
方法一: div 自适应宽度很简单 ,你应该设置div的display:inline-block 然后不要设置宽度就行了方法二: div ul li 嵌套后解决高度自适应办法: html代码如下 ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...
html怎么实现单个li效果,基于DIV+ul+li实现的表格(多示例)
普通的显示数据的时候,ul就是项目列表,li就是列表项.可以用来显示数据.如果用于DIV+CSS布局的话,ul+li可以替换表格的作用,具体的设置,如果宽度高度.行间距.背景边框等需要配合CSS一起设 ...
用div,ul,li,span代替table设计表格
传统的表格一般都是用table标签设计的,现在网页设计很少用table了,主要用div,ul,li,span等标签,这是一种网页设计的思想了,和table不一样.用这种方式设计的html代码结构清晰, ...
html中js隐藏div的高度,js如何获取div（ul li）元素的宽度和高度（包括width/height和CSS的宽度和高度）...
某些时候需要知道元素div(或 ul li)的宽度或高度,大多情况下可以用js取元素div的width或height属性获得,但有时候这个方法不一定奏效,把div的宽度或高度定义在CSS样式中,这个方 ...
html中的div怎么隐藏显示出来,js实现元素div/ul li的显示与隐藏
在网页设计过程中,某些时候需要隐藏一些元素(div/ul li),某些时候又需要显示一些隐藏的元素.例如一打开网页显示一段网站公告,过一小段时间后把公告隐藏起来.对于这类元素显示隐藏的操作,应该如何实 ...
HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
如果直接在网页用 ul li 标签,默认情况下有一个小黑点,并且每个li前面还有一段空白,尤其是li中包括图片的情况.为什么会出现这种情况?ul li 是 html 中的列表标签,所以默认每个li前面 ...
div内li标签间距_html ul li 横排间距
怎么通过CSS来修改UL里LI之间的行间距呢? 怎么通过CSS来修改UL里LI之间的行间距呢? . 使用css语句:line-height 通过设置不同的line-height值得到不同间距. 代码: ...

ul-li（div）下拉列表

ul-li（div）下拉列表相关推荐

最新文章

热门文章