0

我有一个关于 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 也是如此。问题出在哪里，因为我找不到错误。

谢谢！

4

2 回答 2

0

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

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

并有脚本调用：

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

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

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

于 2013-09-22T20:22:41.140 回答
0

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

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

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

将尝试<ul>在 class 下查找 all .fakeLink，因此所有这些都显示。

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

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

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

未测试。

于 2013-09-22T17:31:05.117 回答