列表开发

最新推荐文章于 2021-06-24 15:52:30 发布

xqiitan

最新推荐文章于 2021-06-24 15:52:30 发布

阅读量219

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/xqiitan/article/details/89884323

版权

h5 专栏收录该内容

48 篇文章 0 订阅

订阅专栏

给列表添加span，设置列表内容的图标。
ul li span{width:20px; height:20px; background:#f93; display:inline-block;
text-align:center; line-height:20px;}
内连元素，要想设置width、height、需要设置display:inline-block.
<li><span>△<span>舌尖上的中国</li>

a标签做鼠标悬停效果：
<li><a href="#">舌尖上的中国</a></li>
通过hover设置鼠标悬停效果。
ul li a:hover{color:#900; text-decoration:underline;}

li标签做鼠标悬停：
ul li:hover{background:#909;color:#00f; }

鼠标滑过，li标签里面的内容dl显示出来，默认dl的内容不显示：
ul li dl{padding-left:20px; display:none;}
ul li:hover dl{display:block;}
ul li:hover span{background:#666;} // 鼠标滑过，span也改变背景色
<li>舌尖上的中国
   <dl>
       <dt>舌尖中国</dt>
       <dd>作者：本书编剧组</dd>
       <dd>价格：￥8.63</dd>
   </dl>
</li>

==============使用js方式，控制li中部分元素的显示====================


<head>this is head head
    <script>
        function showDl() {
            document.getElementById('oDl').style.display='block';
        }
        function hiddenDl() {
            document.getElementById('oDl').style.display='none'
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <li onmouseover="showDl()"  onmouseout="hiddenDl()">
                <span>醒醒</span>舌尖上的中国哈哈
                <dl id="oDl">
                    <dt>标题内容</dt>
                    <dd>作者：站三丰剧组</dd>
                    <dd>价格：￥30.36</dd>
                </dl>
            </li>
        </ul>
    </div>
</body>
</html>

代码优化，存在多个列表的时候，使用参数this传递。

<head>this is head head
    <script>
        function showDl(obj) {
            // document.getElementById('oDl').style.display='block';
            obj.getElementsByTagName('dl')[0].style.display = 'block';
        }
        function hiddenDl(obj) {
            // document.getElementById('oDl').style.display='none'
            obj.getElementsByTagName('dl')[0].style.display = 'none';
        }
    </script>
</head>
<body>
    <div>
        <ul>
            <!--this 代表当前li元素-->
            <li onmouseover="showDl(this)" onmouseout="hiddenDl(this)">
                <span>醒醒</span>舌尖上的中国哈哈
                <dl id="oDl">
                    <dt>标题内容</dt>
                    <dd>作者：站三丰剧组</dd>
                    <dd>价格：￥30.36</dd>
                </dl>
            </li>
            <li onmouseover="showDl(this)" onmouseout="hiddenDl(this)">
                <span>醒醒2222</span>舌尖2222上的中国哈哈
                <dl id="oDl">
                    <dt>标题内容22</dt>
                    <dd>作者：站22三丰剧组</dd>
                    <dd>价格：￥230.36</dd>
                </dl>
            </li>
        </ul>
    </div>
</body>
</html>

使用jQuery实现

// 单个列表项，使用id
<li id="List"><span>醒醒</span>舌尖上的中国哈哈
	<dl id="aDl">
		<dt>标题内容</dt>
		<dd>作者：站三丰剧组</dd>
		<dd>价格：￥30.36</dd>
	</dl>
</li>
<script>
	// jquery 中，首先要把dom元素加载完毕，才能执行函数
	$(document).ready(function(){
		$('#List') // $ == jQuery('#ID'), 用id来获取元素
		$('#List').mouseover(function(){
			// 修改dl的css样式当中的display的值
			$('#aDl').css('display', 'block');
		})
		$('#List').mouseout(function(){
			// 修改dl的css样式当中的display的值
			$('#aDl').css('display', 'none');
		})
	})
</script>

-------------------------------------------
多个列表项，传递参数
<li ><span>◇</span>1舌尖上的中国哈哈
	<dl >
		<dt>标题内容1</dt>
		<dd>作者1：站三丰剧组</dd>
		<dd>价格1：￥30.36</dd>
	</dl>
</li>
<li ><span>▽</span>2舌尖上的中国哈哈
	<dl >
		<dt>标题内容2</dt>
		<dd>作者2：站三丰剧组</dd>
		<dd>价格2：￥30.36</dd>
	</dl>
</li>
<li ><span>△</span>3舌尖上的中国哈哈
	<dl >
		<dt>标题内容3</dt>
		<dd>作者3：站三丰剧组</dd>
		<dd>价格3：￥30.36</dd>
	</dl>
</li>

<style>
	// 声明on样式，需要添加点号.
	ul li span .on{background:#ccc; color:#0f0;}
</style>
<script>
	// jquery 中，首先要把dom元素加载完毕，才能执行函数
	$(document).ready(function(){
		$('li') // $ == jQuery('li'), 用标签名来获取元素
		$('li').mouseover(function(){
			// $(this) 表示当前li元素
			$(this).childen('dl').css('display', 'block','font-size','16px');
			$(this).childen('span').addClass('on'); // 添加on样式, 不要加点号.
		})
		$('li').mouseout(function(){
			// 修改dl的css样式当中的display的值
			// $('#aDl').css('display', 'none');
			$(this).childen('dl').css('display', 'none');
			$(this).childen('span').removeClass('on'); // 移除样式
		})
	})
</script>

xqiitan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
列表开发

给列表添加span，设置列表内容的图标。ul li span{width:20px; height:20px; background:#f93; display:inline-block;text-align:center; line-height:20px;}内连元素，要想设置width、height、需要设置display:inline-block.<li><spa...
复制链接

扫一扫