javascript修改bootstrap弹出菜单

发布于 2022-09-01 23:53:46 字数 1765 浏览 6 评论 0

在bootstrap中有一个弹出菜单的组件，demo如下，点击Dropdown按钮，弹出菜单，选择菜单中的一项，菜单会关闭，点击页面上其他任何地方，菜单也会消失。现在想修改一下，改为点击弹出菜单元素内部，菜单不消失，点击菜单以外的地方，菜单能消失。js怎么写？demo代码如下,复制粘贴即可看到效果。
ps:如果修改不方便的话，自己应该怎样写？

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jvectormap/2.0.4/jquery-jvectormap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
    </div>
</div>

<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="vue.js"></script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

看春风乍起 2022-09-08 23:53:46

把dropdown去掉不就得了

回复收藏 0

多情癖 2022-09-08 23:53:46

竟然是1年多前的，我这边测试成功的，
head 标签最后面加上：

    <style>/* 新加的代码 */
    #dropdown-expand {
        display: block;
    }
    </style>

body 最后面加上：

    <script>
    //新加的代码
    window.onload = function() {
        var dropdown = document.getElementsByClassName('dropdown')[0],
            dropdownMenuBox = dropdown.getElementsByClassName('dropdown-menu')[0];

        document.addEventListener('click', function(event) {
            cancelMenuHidden(event);
        }, false);

        function cancelMenuHidden(event) {
            var target = event.target;

            if (!dropdownMenuBox.contains(target) || dropdownMenuBox === target) {
                dropdownMenuBox.id = '';
            } else {
                dropdownMenuBox.id = 'dropdown-expand';
            }

            if (dropdownMenuBox.id) {
                dropdown.className = 'dropdown open';
            }
        }

    };
    </script>

回复收藏 0