俺要讲话 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条)

报告相同问题？

悬赏问题

  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改