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

Question

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

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

这是 Html 代码(.navLevel2 类有显示:无):

    <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

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