Bootstrap鼠标右键树菜单特效源码

当前位置：电视猫 > JavaScript>

电视猫时间： 2024-08-27 17:07:15

Bootstrap鼠标右键树菜单特效源码详解

理解需求

基于Bootstrap框架，我们希望实现一种当用户右键点击页面元素时，能够弹出树形结构的菜单，提供更多的操作选项。这种效果在许多应用场景中都非常实用，比如文件管理、表格操作等。

实现思路

事件监听： 使用JavaScript监听页面的contextmenu事件，当用户右键点击时触发。
菜单结构： 创建一个隐藏的Bootstrap下拉菜单，作为右键菜单的容器。
菜单内容： 动态填充菜单内容，可以根据点击的元素类型和位置来定制化菜单项。
样式定制： 使用Bootstrap的CSS类和自定义样式来美化菜单外观。
位置调整： 根据鼠标点击的位置，调整菜单弹出位置，确保菜单不会被其他元素遮挡。

代码示例

HTML


<!DOCTYPE html>

<html>

<head>

    <title>Bootstrap鼠标右键树菜单</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

</   head>

<body>

    <div class="contain   er">

        <p>右键点击此处</p>

    </div>



    <div class="dropdown" id="contextMenu" style="display: none;">

        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

            <li><a class="dropdown-item" href="#">选项1</a></li>

            <li><a class="dropdown-item" href="#">选项2</a></li>

            <li><hr></li>

            <li><a class="dropdown-item" href="#">选项3</a></li>

        </ul>

    </div>



    <script>

        document.addEventListener('contextmenu', (event) => {

            event.preventDefault(); // 阻止默认右键菜单



            // 获取鼠标点击位置

            const x = event.clientX;

            const y = event.clientY;



            // 设置菜单位置

            document.getElementById('contextMenu').style.left = x + 'px';

            document.getElementById('contextMenu').style.top = y + 'px';



            // 显示菜单

            document.getElementById('contextMenu').style.display = 'block';

        });

    </script>

</body>

</html>