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>