俺要讲话 2020-12-11 09:15 采纳率: 60%
浏览 449
已采纳

点击图片，展开select下拉框的方法

web端，点击图片，直接展开下拉框选项，网上找不到相关方法，都说要自己写个模拟select的。

但是我技术不够，实在写不出来，有没有大佬分享下相关的demo给我借鉴下，在这里谢谢啦

  • 写回答

19条回答 默认 最新

  • 我的中二病又犯了 2020-12-11 10:58
    关注
    <!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>测试</title>
    <style>
        ul {
            list-style: none;
            width: 100px;
            border: 1px solid #999;
            margin: 0;
            padding: 0;
        }
        img {
            width: 30px;
            height: 30px;
            background-color: red;
        }
        li {
            cursor: pointer;
            padding: 10px;
        }
        li:hover {
            background-color: rgba(0, 100, 13, 0.534);
        }
    </style>
</head>

<body>
    <div>
        <img src="" alt="">
        <ul>
            <li>选项一</li>
            <li>选项二</li>
            <li>选项三</li>
            <li></li>
        </ul>
    </div>
//此处插入jquery引入
    <script type="text/javascript">
        $(function () {
  
            $('img,ul>li').on('click', function (event) {
                if (event.type == 'click') {
                    $('ul').css("display") == 'none' ? 
                    $('ul').css("display", "block") : 
                    $('ul').css("display", "none");
                }
            })
        })
        
    </script>
</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(18条)

报告相同问题？

悬赏问题

  • ¥15 phython路径名过长报错 不知道什么问题
  • ¥15 深度学习中模型转换该怎么实现
  • ¥15 HLs设计手写数字识别程序编译通不过
  • ¥15 Stata外部命令安装问题求帮助！
  • ¥15 从键盘随机输入A-H中的一串字符串，用七段数码管方法进行绘制。提交代码及运行截图。
  • ¥15 TYPCE母转母，插入认方向
  • ¥15 如何用python向钉钉机器人发送可以放大的图片？
  • ¥15 matlab（相关搜索：紧聚焦）
  • ¥15 基于51单片机的厨房煤气泄露检测报警系统设计
  • ¥15 Arduino无法同时连接多个hx711模块，如何解决？