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

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

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>

的trigers，写入头：

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

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

所以，问题是：如果我悬停/点击链接2，它会打开所有的嵌套列表秒。同样如果点击/悬停链接3. 问题在哪里，因为我找不到错误。

谢谢！

来源

2013-09-22 cristixxxlog

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

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

并有脚本调用：

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

这似乎工作。你可以在这里看到它：Codepen Example

然后，你会复制概念与悬停版本。

来源

2013-09-22 20:22:41 rwaymouth

非常感谢！现在它工作了！ – cristixxxlog

的选择.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); 
}

未经测试。

来源

2013-09-22 17:31:05 RCNeil

对不起，但使用next（）不会做任何事情，无论窗口大小如何。不过谢谢！ – cristixxxlog

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

回答

相关问题