2

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

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

这里有几张截图。您可以将鼠标悬停在链接上（悬停时它们会变成紫色），但是当您单击单个链接时，它往往只是单击整个菜单而不是将您发送到所述页面。但是，当我将鼠标悬停在它上面时，我可以看到它在我的浏览器左下角显示链接。我似乎无法弄清楚点击退出而不是将您发送到页面的 url 发生了什么。

http://cl.ly/image/0S2F2c3h3g1o （悬停屏幕截图）

http://f.cl.ly/items/3P1h27323B203E2J0N41/clickout.png （点击）

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

这是我连接的 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 -->

这是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>

和CSS。

#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;
}

谢谢！:3

4

1 回答 1

2

After the obj.opts click event handler fires, the obj.dd click event handler will also fire. To prevent this, call the stopPropagation function of the event object passed to the handler.

See here for a working example: http://jsfiddle.net/hwTUZ/1/

于 2013-03-24T06:34:43.967 回答