Javascript 自定义下拉菜单不使用链接

我正在尝试使用我找到的教程制作自定义菜单

我遇到的问题不是实现，而是阻止我点击链接的东西。当我打开菜单时，当我点击一个链接时，它就关闭了菜单，很快我看到它突出显示了整个框而不是链接

下面是一些截图。您可以将鼠标悬停在链接上（当鼠标悬停时，链接会变成紫色），但当您单击单个链接时，它往往只会单击整个菜单，而不会将您发送到所述页面。但当我将鼠标悬停在它上面时，我可以看到它在我的浏览器的左下角显示链接。我只是不知道用点击而不是url将您发送到页面时发生了什么

（悬停屏幕截图）

（单击退出）

当我尝试点击任何链接时，我只得到这个蓝色框，它会关闭菜单，而不是将您发送到链接页面

这是我连接的HTML

   <!-- MOBILE MENU / -->
<nav id="mobile-menu">
    <div id="mobmenu" class="dropdown-menu" tabindex="1">
        <ul class="dropdown" tabindex="1">
            <li><a href="/about">ABOUT</a></li>
            <li><a href="/work">WORK</a></li>
            <li><a href="/notes">NOTES</a></li>
        </ul>
    </div>  
</nav>
<!-- / MOBILE MENU -->

---

谢谢3

在

obj.opts

click事件处理程序启动后，

obj.dd

click事件处理程序也将启动。要防止出现这种情况，请调用传递给处理程序的事件对象的

stopPropagation

函数

---

请参见此处的工作示例：

Sweet！谢谢我知道这一定是JS里的东西。我就是想不出来。我一直在修补return-false，还做了一些默认操作，但什么都没用！非常感谢你花时间来解决这个问题：）嘿，你不知道如何隐藏菜单链接吗？它们是可以点击的，即使菜单没有展开。你可以通过修改下拉类的CSS使其默认隐藏（“display:none；”），然后在用户点击div时切换可见性来做到这一点。此外，如果你只是想有一个链接下拉列表，一些javascript代码是多余的。下面是一个去掉冗余javascript的固定版本：

        function DropDown(el) {
            this.dd = el;
            this.opts = this.dd.find('ul.dropdown > li');
            this.val = '';
            this.index = -1;
            this.initEvents();
        }
        DropDown.prototype = {
            initEvents : function() {
                var obj = this;

                obj.dd.on('click', function(event){
                    $(this).toggleClass('active');
                    return false;
                });

                obj.opts.on('click',function(){
                    var opt = $(this);
                    obj.val = opt.text();
                    obj.index = opt.index();
                });
            },
            getValue : function() {
                return this.val;
            },
            getIndex : function() {
                return this.index;
            }
        }

        $(function() {

            var dd = new DropDown( $('#mobmenu') );

            $(document).click(function() {
                // all dropdowns
                $('.dropdown-menu').removeClass('active');
            });

        });

    </script>

#mobile-menu {
    width: 320px;
}
.dropdown-menu {
    background: #050607 url(images/menu_closed.png) no-repeat center top;
    border: none;
    color: #FFF;
    cursor: pointer;
    height: 50px;
    font-weight: bold;
    margin-top: 17px;
    outline: none;
    position: fixed;
    -webkit-appearance: none;
    width: 320px;
    z-index: 9999;
}
.dropdown-menu::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    margin-top: -6px;
}
/* ACTIVE STATE */
.dropdown-menu .dropdown {
    background: #050607;
    height: 1000px;
    list-style: none;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    opacity: 0.0;
}
.dropdown-menu .dropdown  li { 
    position: relative; 
    top: 10px; 
    z-index: 99;
}
.dropdown-menu .dropdown li a {
    border-top: 1px solid #1f1f1f;
    color: #FFF;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-size: 30px;
    font-weight: 200;
    letter-spacing: 8px;
    pointer-events: visible;
    padding: 15px 25px 15px 25px;
    text-align: center;
    text-decoration: none;
    z-index: 9999999999999999999999;
}
.dropdown-menu .dropdown li:nth-child(5)  {
    font-size: 15px;
    font-weight: 100;
    letter-spacing: 2px;
    text-align: center;
}
.dropdown-menu .dropdown li:hover a { background: #050607; color: #605e90; }
.dropdown-menu.active .dropdown {
    -moz-animation: fadein .3s linear;
    -webkit-animation: fadein .3s linear;
    -ms-animation: fadein .3s linear;
    animation: fadein .3s linear;
    pointer-events: auto;
    opacity: 1.0;
    z-index: 999999 !important;
}
.dropdown-menu.active:active {
    pointer-events: auto;
}
.dropdown-menu.active::after { 
    border-color: #000; 
    margin-top: -3px; 
}
.dropdown-menu.active {
    background: #050607 url(images/menu_open.png) no-repeat center top;
    outline: none;
}