个人中心
gpt4 book ai didi

javascript - 我想显示下拉菜单而不隐藏其他数据

转载 作者：行者123 更新时间：2023-11-28 03:50:28 28 4
gpt4 key购买 nike

在下面给出的代码中，当我选择“应用程序”下拉菜单时，它隐藏了下面的数据(即，它隐藏了“布局”和“widjet”)。我需要通过下拉菜单显示该数据效果。你能帮帮我吗？

    #first {
        float:left;
        width:15%;
     color :bisque; 
        border-color: #023b3b;
    border-style : solid;
        height: 100%;
    background-color :#023b3b;
    }

    #boa{
        height: 5%;
        width: 20%;
        float: left;

    }

    .bob{
        text-indent: 200%;
        line-height: 210%;
        font-size: 150%;
        font-family: sans-serif;
        color: white;
        font-weight: bold;

    }
    .boc{
        text-indent: 4%;
        color : white;
        font-size: 83%;
        font-family: sans-serif;

        font-weight: normal;
    }
    .bod{
        color:white;
        font-size: 100%;
        font-family: sans-serif;
        line-height: 200%;
        list-style-type: none;
    }
    #demo {
            margin: 30px 0 50px 0;
            font-family:  sans-serif;
        }

        #demo .wrapper {
            display: inline-block;
            width: 180px;
           /* margin: 0 10px 0 0;*/
            height: 20px;
            position: relative;
        }

        #demo .parent {
            height: 100%;
            width: 100%;
            display: block;
            cursor: pointer;
            line-height: 30px;
            height: 30px;
          /*  border-radius: 5px;*/
            background: #023b3b;
            border: 1px solid #023b3b;
            border-bottom: 1px solid #023b3b;
            color: white;
           /* font-weight: bold;*/
            z-index: 2;
            position: relative;
            -webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
            -webkit-transition-delay: .2s;
            text-align: center;
        }

        #demo .parent:hover,
        #demo .content:hover ~ .parent {
            background: #122112;
            -webkit-transition-delay: 0s, 0s, 0s;
        }

        #demo .content:hover ~ .parent {
           /* border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;*/
            z-index: 0;
        }

        #demo .content {
            position: absolute;
            top: 0;
            display: block;
            z-index: 1;
            height: 0;
            width: 180px;
            padding-top: 30px;
            -webkit-transition: height .2s ease;
            -webkit-transition-delay: .4s;
            border: 1px solid #339933;
           /* border-radius: 5px;*/
            /*box-shadow: 0 1px 2px rgba(0,0,0,.4);*/
        }

        #demo .wrapper:active .content {
            height: 100px;
            z-index: 3;
            -webkit-transition-delay: 0s;
        }
 <html>
        <head>
            <title>  PROJECT </title>
            <link rel="stylesheet" type="text/css" href="stack.css">
        </head>
        <body>
        <div id="first" style="float:left; lngth:60%; ">
    <p><img src="image1.jpg"  id="boa"><span class="bob">First</span></p>
            <p class="boc" >Main</p>
            <div id="demo">
        <div class="wrapper">
            <div class="parent">Dashboard</div>
        </div><br> <br>  
        <div class="wrapper">
            <div class="content">
                <ul>
                    <a href="#"><li>Inbox</li></a>
                    <a href="#"><li>Condact</li></a>
                    <a href="#"><li>Calender</li></a>
                    <a href="#"><li>Other</li></a>
                </ul>
            </div>
            <div class="parent">Apps</div>
        </div><br><br>

        <div class="wrapper">
            <div class="content">
                <ul>
                    <a href="#"><li>Header</li></a>
                    <a href="#"><li>Aside</li></a>
                    <a href="#"><li>Footer</li></a>
                    <a href="#"><li>Other</li></a>
                </ul>
            </div>
            <div class="parent">Layouts</div>
        </div><br><br>
        <div class="wrapper">
            <div class="parent">Widjet</div>
        </div>
            </div>

             <p class="boc">Componets</p>

             <p class="boc">Help</p>
             <p class="bod">&nbsp; Documents</p>

    </div>

        </body>
    </html>

    #demo .content:hover {
        height: 123px;
        z-index: 3;
        -webkit-transition-delay: 0s;
    }


    #demo .content ul {
        background: #339933;
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100%;

    }

    #demo .content ul a {
        text-decoration: none;
    }

    #demo .content li:hover {
        background: #122112;
        color: white;
    }

    #demo .content li {
        list-style: none;
        text-align: left;
        color: white;
        font-size: 14px;
        line-height: 30px;
        height: 30px;
        padding-left: 10px;
        border-top: 1px solid #023b3b;
    }

在上面的代码中，当我选择“应用程序”下拉菜单时，它隐藏了下面的数据(即，它隐藏了“布局”和“widjet”)。我需要用下拉效果显示该数据.你能帮帮我吗？

最佳答案

我可以给你一些重要的提示。首先你要删除position: absolute 来自 #demo .content 选择器。而且position: relative; 到 #demo .parent 选择器中的 position: absolute;。

这将允许整个菜单在需要容纳更多内容时展开。

关于javascript - 我想显示下拉菜单而不隐藏其他数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38972635/

28 4 0
文章推荐： css - 如何将 fontawesome 图标制作到其父中心
文章推荐： c++ - 奇怪的基本 SDL
文章推荐： c++ - 在 Ruby 上调用 Dll(不是 Windows API)
文章推荐： html - Angularjs HTML5 视频攻击
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com