选择下拉菜单显示和隐藏的实现

Posted 150536fbb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选择下拉菜单显示和隐藏的实现相关的知识，希望对你有一定的参考价值。

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .menu:hover .menucontent{
                display: block;
            }
            .menucontent{
                width: 120px;
                display: none;
                text-align: center;
                border: 1px solid #ddd;
            }
            .menu .btn{
                display: block;
                width: 50px;
                height: 20px;
                text-align: center;
                font-size: 14px;
                background: red;
                color: #fff;
            }
            
        </style>
    </head>
    <body>
        <div class="menu">
            <span class="btn">菜单</span>
            <div class="menucontent">
                <p>hello</p>
                <p>world</p>
                <p>helloWorld</p>
            </div>
            
        </div>
    </body>
</html>

 

以上是关于选择下拉菜单显示和隐藏的实现的主要内容，如果未能解决你的问题，请参考以下文章

选择其他人时如何隐藏其他下拉菜单

jQuery 如何实现 “鼠标悬浮下拉菜单” 效果？

如何用js通过下拉菜单来实现div的隐藏和显示

隐藏/显示不同片段的操作栏选项菜单项

Django Admin显示/隐藏字段如果在下拉菜单中选择了特定值

基于下拉菜单中的选择显示/隐藏窗体字段