点击显示另外一个div（或者其他的下拉列表）

最新推荐文章于 2022-08-08 20:40:31 发布

lsx19981201

最新推荐文章于 2022-08-08 20:40:31 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/lsx19981201/article/details/86752256

版权

由于在做项目的时候，链接点击和单独绑定onclick事件，会出现一点问题。特写此篇，作为笔记复查

点击显示下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .a {
    display: block;
    background-color: #f2f2f2;
    border-radius: 5px;
    overflow: hidden;
}
    </style>
</head>
<body>
     <div class="panel col mg" onclick="showDiv()">
        <div class="a">
            <div class="panel-icon">
                <i class="layui-icon layui-icon-add-1"  ></i> 
            </div>
           <div class="panel-word newFile">
                  <span></span>
                  <cite>新建</cite>
            </div>
        </div>
    </div>
    <div class="layui-insert" id="layui-insert"> 
        <div class="create" widget-toggle="false" id="create">
            <i class="layui-icon layui-icon-add-1"></i>
            <span class="create-text">新文档</span>
            <span class="arrow-down" id="arrow-down">
                <i class="arrow">▼</i>
            </span>
            <ul class="widget-menu" id="widget-menu" widget-toggle-content="right" style="display: none; visibility: visible;">
                <li class="widget-menu-item can-disabled">添加拍品</li>
                <li class="widget-menu-item can-disabled">修改拍品</li>
                <li class="widget-menu-item can-disabled">删除拍品</li>
                <li class="widget-menu-item split-line"></li>
                <li class="widget-menu-item can-disabled">登录接口</li>
                <li class="widget-menu-item can-disabled">注册接口</li>
                <li class="widget-menu-item split-line"></li>
                <li class="widget-menu-item can-disabled">添加文档</li>
            </ul>
                            
        </div>
    </div>
    <script type="text/javascript">  
        function showDiv(){
            //获取要显示的div对象,并显示
        document.getElementById('widget-menu').style.display="block"; 
        }    
    </script>
</body>
</html>

点击显示div

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div onclick="showDiv()" style="background-color: #999;">点击显示另一个div</div>
        <div id="111" style="display:none;background-color: #7FFFD4;">点击后显示的div</div>
    </body>
    <script type="text/javascript">  
        function showDiv(){
            //获取要显示的div对象,并显示
        document.getElementById('111').style.display="block"; 
        }    
    </script>
</html>

lsx19981201

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
点击显示另外一个div（或者其他的下拉列表）

由于在做项目的时候，链接点击和单独绑定onclick事件，会出现一点问题。特写此篇，作为笔记复查点击显示下拉列表&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&
复制链接

扫一扫