当前位置: 首页 > news >正文

html实现菜单点击小三角展开和收回

1. 代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>带小三角的参数设置菜单</title>
    <style>
        /* 容器定位‌:ml-citation{ref="4,7" data="citationList"} */
        .dropdown {
            position: relative;
            display: inline-block;
            margin: 20px;
        }

        /* 按钮基础样式‌:ml-citation{ref="4,7" data="citationList"} */
        .dropbtn {
            background: #4CAF50;
            color: white;
            padding: 10px 35px 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            position: relative;
            transition: all 0.3s;
        }

        /* CSS绘制小三角‌:ml-citation{ref="1,4" data="citationList"} */
        .triangle {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 6px solid white;
            transition: transform 0.3s;
        }

        /* 下拉菜单容器‌:ml-citation{ref="4,7" data="citationList"} */
        .dropdown-content {
            display: none;
            position: absolute;
            min-width: 160px;
            background: #fff;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin-top: 5px;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.3s;
        }

        /* 展开状态‌:ml-citation{ref="2,4" data="citationList"} */
        .active .dropdown-content {
            display: block;
            opacity: 1;
        }
        .active .triangle {
            transform: translateY(-50%) rotate(180deg);
        }

        /* 菜单项交互‌:ml-citation{ref="4,7" data="citationList"} */
        .dropdown-content a {
            display: block;
            padding: 10px 15px;
            color: #333;
            text-decoration: none;
            transition: background 0.2s;
        }
        .dropdown-content a:hover {
            background: #f8f9fa;
        }
    </style>
</head>
<body>
    <div class="dropdown">
        <button class="dropbtn" onclick="toggleMenu()" aria-expanded="false">
            参数设置
            <i class="triangle"></i>
        </button>
        <div class="dropdown-content">
            <a href="#" tabindex="0">显示设置</a>
            <a href="#" tabindex="0">声音设置</a>
            <a href="#" tabindex="0">隐私选项</a>
        </div>
    </div>

    <script>
        // 切换菜单状态‌:ml-citation{ref="2,4" data="citationList"}
        function toggleMenu() {
            const dropdown = document.querySelector('.dropdown');
            const isActive = dropdown.classList.toggle('active');
            dropdown.querySelector('.dropbtn').setAttribute('aria-expanded', isActive);
        }

        // 点击外部关闭‌:ml-citation{ref="2,4" data="citationList"}
        document.addEventListener('click', (e) => {
            if (!e.target.closest('.dropdown')) {
                document.querySelector('.dropdown').classList.remove('active');
            }
        });

        // 键盘导航支持‌:ml-citation{ref="4,7" data="citationList"}
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape') {
                document.querySelector('.dropdown').classList.remove('active');
            }
        });
    </script>
</body>
</html>

2. 效果

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.dtcms.com/a/49393.html

相关文章:

  • Nginx代理Kafka集群
  • 06、Hadoop3.x从入门到放弃,第六章:Yarn基本概念与操作
  • 基础篇12-图像分割(中)--区域的方法
  • 深入浅出C语言:第一步,理解 Hello World!
  • Vue输入框获取焦点
  • 阻塞队列的实现(线程案例)
  • 计算机网络基础:认识网络拓扑结构
  • 生态安全相关文献推荐
  • Gravitino SparkConnector 实现原理
  • 线程POSIX信号量/基于环形队列的⽣产消费模型
  • 基础算法——高精度
  • 大模型小白入门
  • 深入浅出零拷贝技术:高性能IO的底层原理与Java/Linux实战
  • HMC7043和HMC7044芯片配置使用
  • AI 代理 x Sui:开启 Web3 自动化新时代!
  • 自动扶梯人员摔倒掉落识别检测数据集VOC+YOLO格式5375张2类别
  • 概率论基础概念
  • 【leetcode hot 100 238】除自身以外数组的乘积
  • 腾讯 TDF 即将开源 Kuikly 跨端框架,Kotlin 支持全平台
  • 自动化设备车间数据采集创新解决方案
  • 【pta】1031 查验身份证
  • 使用并行计算优化对拍
  • mmseg的decode_heads解析:理解语义分割解码器设计
  • ubuntu22.04下Meshlab打开obj文件闪退——使用Appimage并放入收藏夹中
  • LLM参数高效微调技术 PRFT
  • Qt QOCI driver available but not loaded(可用但未加载)
  • MC9S12单片机上电初始化过程及BOOTLOADER分析
  • C++编程:进阶阶段—1内存模型
  • 【机器学习】应用梯度下降法训练线性回归算法模型
  • 玩转python: 深度解析Python高阶函数及推导式