下拉菜单中的链接不起作用答案

【问题标题】：Links not working in drop-down menu下拉菜单中的链接不起作用
【发布时间】：2014-06-11 22:08:38
【问题描述】：

当宽度低于 1024 像素时，我正在使用 magento 网站的下拉菜单。下拉菜单工作正常，但是当显示菜单时（通过.fadeToggle(); 方法）链接将不起作用，而是隐藏ul，就好像我再次按下了链接一样。据我所知，触发效果的按钮（#nav li.level0 a）没有覆盖下拉菜单中的链接。所以我不明白为什么它就像我在点击它一样。用 css 也找不到任何奇怪的东西。

在 jsfiddle 中尝试过，在这里它可以工作，所以也许它与 css 相关？

JS 小提琴：http://jsfiddle.net/bpVZ9/

这是网站的链接：http://shop.veivecouture.com/

HTML：

<ul id="nav" class="default">

    <li class="level0 parent">
<a href="http://shop.veivecouture.com/collections.html">
            <span>Collections <em>+</em></span>
    </a>
        <ul class="level1" style="top: 83px; display none">
            <li class="level1">
                <a href="http://shop.veivecouture.com/collections/tensione-superficiale.html" class=""><span>Head</span></a>
            </li>
        </ul>   
    </li>
</ul>

CSS：

.header-sidebar .box-scroll .nav-container #nav{
width: 100%;
padding: 0px;
}

.header-sidebar .box-scroll .nav-container #nav a{
padding: 0px;
}

.header-sidebar .box-scroll .nav-container #nav span{
padding-left: 20px;
}

.header-sidebar .box-scroll .nav-container #nav li.level0{
width: 45%;
max-width: 45%;
border-bottom: solid 1px #ddd; 
}

.header-sidebar .box-scroll .nav-container #nav span.plus{
right: -10px;
}

.header-sidebar .box-scroll .nav-container #nav ul.level1 {
width: 100%;
top: 100px;
width: 100%;
max-width: 100%;
top: 0px;
margin-left: 0px;
display: block;
pointer-events: none;
}

.header-sidebar .box-scroll .nav-container #nav ul.level1 li{
width: 100%;
top: 100px;
width: 100%;
max-width: 100%;
top: 36px;
left: 0px;
margin-left: 0px;
pointer-events: none;
}

.header-sidebar .box-scroll .nav-container #nav ul.level1 li a{
pointer-events: auto;
}

.header-sidebar .box-scroll .nav-container #nav li:first-child{
margin-right: 2%;
}

这是我的 JS：

if (jQuery(window).width() < 1024) {
            $('#nav li.parent ul li.level1').hide();
        $('#nav li.level0 a').click(function(e){ return false;});
        $('#nav li.level0 a').click(function(e){
            e.preventDefault(); 
            e.stopPropagation();
                $(this).parent('li').find('ul li.level1').stop().fadeToggle(500);
                    $('#nav li.level0 a').not(this).parent('li').find('.level1:visible').hide();
        });
        }

【问题讨论】：

为什么要为同一个元素绑定两个点击处理程序..？
你能给我们看看 HTML 和 CSS 吗？
你的意思是'return false'绑定？
刚刚浏览了您的网站。宽度 Ear 时查看控制台，出现此错误Uncaught TypeError: Object http://shop.veivecouture.com/body-parts/ear.html has no method 'attr' 。所以这可能就是它没有做任何事情的原因。
是的，这听起来很合理。我想知道是什么打断了它？问题是，当我将鼠标悬停在 Chrome 中的链接上时，我可以看到左下角显示的链接 url。所以我想知道是什么干扰...

标签： jquery html drop-down-menu hyperlink

【解决方案1】：

您需要停止将点击事件传播到level1 ul。（您将它们嵌套，当您单击链接时，操作会上升到父元素，并且还会触发“隐藏菜单”操作）

如果我设法让您的 HTML 结构正确，这段代码应该可以解决问题。

if (jQuery(window).width() < 1024) {
     jQuery('#nav .level1 a').click(function(event) {
            event.stopPropagation();
     });
}

请检查一下，因为我很难在 atm 上测试它，或者如果它不起作用，请提供一个 Jsfiddle，以便我们修改代码

【讨论】：

这很奇怪，我在 JS-fiddle 中尝试过，它工作正常：jsfiddle.net/bpVZ9/1

【解决方案2】：

好的，所以问题是它针对的是li.level0 中的所有<a>s，甚至是li.level1 中的那些，因此我不得不在JS 中添加一个排除项（.not('ul li.level1 a')，如下所示：

    if (jQuery(window).width() < 1024) {
        jQuery('#nav li.parent ul li.level1').hide();
        jQuery('#nav li.parent a').not('ul li.level1 a').click(function(e){
                e.preventDefault();
                jQuery(this).find('span.plus').toggleClass('opened');
    jQuery('#nav li.level0 a').not(this).parent('li').find('.level1:visible').hide();
                jQuery(this).parent('li').find('ul li.level1').stop().fadeToggle(500);
        });
    }

【讨论】：