javascript - 模拟做一个点击展示更多详情
本文介绍了javascript - 模拟做一个点击展示更多详情的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我自己搞出来了 谢谢大家的帮助
当我点击第一排任意一个红色方块，会出现一个黄色条，如图：
当我点击第二排任意一个红色方块，会出现一个黄色条，如图：
当我点击第三排任意一个红色方块，会出现一个黄色条，如图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{ width: 500px; padding: 5px; background: #e5e5e5; border: 1px solid black; list-style: none; margin: 80px auto; }
li{ width: 100px; height: 60px; background: red; display: inline-block; }
div{ width: 500px; height: 40px; background: yellow; position: relative; left: 0; }
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li><div></div>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>本来我觉得挺简单的，但是一排红色方块有几个数目是不确定的，总的红色方块书也是不确定的，让我很为难。只能来求助
这是实习的时候，第一次接手的任务，单就卡壳了，好着急
解决方案
这个意思？DEMO
这篇关于javascript - 模拟做一个点击展示更多详情的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
