jQuery 下拉菜单打开所有子菜单

Question

我有一个关于 jQuery 的问题。我想制作一个带有子菜单的响应式下拉菜单。如果窗口宽度小于 700 像素，子菜单将触发 onClick。如果窗口宽度超过 700 像素，子菜单将触发 onHover。

window.resize 代码用于在我调整窗口大小时进行更改，而不刷新页面。它有效，但问题是，如果我单击/悬停任何带有嵌套子列表的两个链接，它会打开所有嵌套列表。除此之外，它应该可以正常工作。

这是 Html 代码（.navLevel2 类有 display: none）：

    <div class="mainNav">
     <ul class="navLevel1">
    <li><a href="">link 1</a></li>
        <li class="fakeLink">link 2
           <ul class="navLevel2">
            <li><a href="">link 2.1</a></li>
        <li><a href="">link 2.2</a></li>
           </ul>
        </li>
        <li class="fakeLink">link 3
           <ul class="navLevel2">
            <li><a href="">link 3.1</a></li>
                <li><a href="">link 3.2</a></li>
           </ul>
        </li>
        <li><a href="">link 4</a></li>
      </ul>
    </div>

这是 jQuery：

    <script>
      $(document).ready(function(){
        function checkWidth() {
            var windowsize = $(window).width();
            if (windowsize < 700) {
                $('.navLevel1').addClass('small');
                $('.fakeLink').attr('onclick','return click_m()');
            } else {
                $('.navLevel1').addClass('big');
                $('.fakeLink').attr('onmouseover','return toggle_m()').attr('onmouseout','return toggle_m()');
            }
        }
        checkWidth();  // Execute on load

        $(window).resize(function() {
            if($(window).width() < 700) {
                $('.mainNav > ul').removeClass('big');
                $('.mainNav > ul').addClass('small');
                $('.fakeLink').attr('onclick','return click_m()');
                $('.fakeLink').removeAttr('onmouseover','return toggle_m()').removeAttr('onmouseout','return toggle_m()');
            }
            else if($(window).width() > 700) {
                $('.mainNav > ul').removeClass('small');
                $('.mainNav > ul').addClass('big');
                $('.fakeLink').attr('onmouseover','return toggle_m()').attr('onmouseout','return toggle_m()');
                $('.fakeLink').removeAttr('onclick','return click_m()');    
            }
        }) // window.resize
      }) // document.ready
    </script>

触发器，写在标题中：

function click_m(){
  $('.fakeLink > ul').slideToggle(300); 
}

function toggle_m(){
  $('.fakeLink > ul').stop().slideToggle(300);  
}

所以，问题是： 如果我悬停/单击链接 2，它会打开所有嵌套列表。如果单击/悬停链接 3，则相同。 问题出在哪里，因为我找不到bug。

谢谢！

Answer 1

我认为您需要更改 click_m 函数以定位被点击的特定元素。我试过这个：

function click_m($target){
  $($target).children().slideToggle(300); 
}

并进行了脚本调用：

$('.fakeLink').attr('onclick','return click_m(this)');

这似乎有效。你可以在这里看到它：Codepen Example

然后，您只需使用悬停版本复制该概念。

Answer 2

触发器中的选择器.fakeLink > ul -

function click_m(){
   $('.fakeLink > ul').slideToggle(300);   
}

function toggle_m(){
   $('.fakeLink > ul').stop().slideToggle(300);  
}

将尝试在.fakeLink 类下查找所有<ul>，并因此将它们全部显示出来。

您可以使用next() 来选择下一个<ul>，我相信应该可以。所以——

function click_m(){
   $('.fakeLink').next('ul').slideToggle(300);   
}

function toggle_m(){
   $('.fakeLink').next('ul').stop().slideToggle(300);  
}

未测试。