Question

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

在一个jsfiddle中试过它，这里有效，所以也许它与css有关？

JS-fiddle：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();
        });
        }

Answer 1

您需要停止点击事件的传播，直到level1 ul。（你将它们嵌套，当你点击链接时，动作会转到父元素，它也会触发＆＃34;隐藏菜单＆＃34;动作）

如果我设法使您的HTML结构正确，那么此代码应该可以解决问题。

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

请检查一下，因为我很难测试它，或者提供一个Jsfiddle，如果它没有工作，所以我们可以修改代码

Answer 2

好的问题是，它定位于<a>内的所有li.level0，甚至是li.level1内的.not('ul li.level1 a')，因此我不得不排除（{{1}在JS中如此：

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

链接在下拉菜单中不起作用

2 个答案: