javascript - 模拟做一个点击展示更多详情-PHP中文网问答

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

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

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

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

<!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; }
    p{ 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><p></p>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

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

<!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;} p{ 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> <p></p> </li> <li> <a href="" class="block red"></a> <a href="" class="block "></a> <p></p> </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> <p></p> </li> </ul> </body> <script> $(function(){ root=$(ul); root.find("a").click(function(){ root.find("p").hide(300); $(this).parent("li").find("p").stop(0,0).show(300); }) }) </script>

全部回复(5)

阿神2017-04-11 10:13:20 5楼

这个意思？DEMO

赞 +0

添加回复