Question

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

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，则相同。问题在哪里，因为我找不到错误。

谢谢！

Answer 1

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

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

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

将尝试查找班级<ul>下的所有.fakeLink，因此所有next()都会显示。

您可以使用<ul>来选择下一个function click_m(){ $('.fakeLink').next('ul').slideToggle(300); } function toggle_m(){ $('.fakeLink').next('ul').stop().slideToggle(300); }，我相信这应该有效。所以 -

{{1}}

未经测试。

Answer 2

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

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

并进行了脚本调用：

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

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

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

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

2 个答案: