模拟做一个点击展示更多详情

我自己搞出来了谢谢大家的帮助

当我点击第一排任意一个红色方块，会出现一个黄色条，如图：

当我点击第二排任意一个红色方块，会出现一个黄色条，如图：

当我点击第三排任意一个红色方块，会出现一个黄色条，如图：

<!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>

本来我觉得挺简单的，但是一排红色方块有几个数目是不确定的，总的红色方块书也是不确定的，让我很为难。只能来求助
这是实习的时候，第一次接手的任务，单就卡壳了，好着急

静态布局的时候，你在每个横排红条下面均放入一个黄条（每组红条、黄条都有同一父级），样式什么的，你按照你的需求来，然后给黄条display：none，这样默认就只有红条
js控制点击红条的时候修改对应黄条的display属性，元素显示后会撑开页面结构

这个意思？DEMO

没明白你想干什么

不好意思啊我自己试了很久搞出来了

这个~说爱我~

<!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: 100%; height: 5rem; display: block; }
    li a{display: inline-block;width:10rem;height:5rem;}
    div{ display: none; clear:both;width: 500px; height: 40px; background: yellow; position: relative; left: 0; }
    </style>
</head>red
<body>
    <ul>
        <li>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <div></div>
        </li>
        <li>
            <a href="" class="block red"></a>
            <a href="" class="block "></a>
            <div></div>
        </li>
        <li>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <a href="" class="block red"></a>
            <div></div>
        </li>
    </ul>
</body>

<script>
    $(function(){
        root=$(ul);
        root.find("a").click(function(){
            root.find("div").hide(300);
            $(this).parent("li").find("div").stop(0,0).show(300);
        })
    })
</script>

【热门文章】