问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
看有个大西瓜
    45934563

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

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

    clipboard.png

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

    clipboard.png

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

    clipboard.png

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

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

    javascriptcsshtml5
    阅读 3.5k
    5 个回答
    得票最新
    头像
    littlelyon
      7.9k3927
      ✓ 已被采纳
      头像
      prototype_eva
        1.1k23657

        没明白你想干什么

        头像
        看有个大西瓜
          45934563

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

          头像
          小桃酥的曲奇饼
            14411017

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

            头像
            golden_freeman_china
              1.8k1211

              这个~说爱我~

              <!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>
              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题