Question

我正在尝试修复响应式菜单的代码。问题是每当我点击“关于”菜单/按钮时。出现图库的子菜单，而不是关于子菜单。这是我目前正在处理的代码

HTML

<div class="container12">
    <div class="column12">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Gallery</a>
                        <ul class="sub-menu">
                            <li><a href="#">Gallery1</a></li>
                            <li><a href="#">Gallery2</a></li>
                        </ul>
                </li>
                <li>
                    <a href="#">About</a>
                        <ul class="sub-menu">
                            <li><a href="#">About3</a></li>
                            <li><a href="#">About4</a></li>
                        </ul>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</div>

JAVASCRIPT

<script>
$(document).ready(function(){
    $('ul.sub-menu').hide(function(){
        $('nav ul li').click(function(){
       $('ul.sub-menu').slideToggle(500);

        })
    })


})
</script>

CSS

nav{margin-top:10px; display:block;}
nav ul li{display:inline;  background-color:beige; float:left}
nav ul li a{display:inline-block; text-decoration:none; padding:10px 20px; position:relative}

.display_menu{display:block !important}

ul.sub-menu{position:absolute; display:none}
ul.sub-menu li{display:block; float:none }



@media only screen and (max-width: 360px){

    nav ul li{display:block; float:none}
    ul.sub-menu{position:static;}

}

Answer 1

您的问题是您的事件处理程序导致所有 ul.sub菜单项向下滑动。您需要指定只希望单击元素的子项向下滑动：

<script>
    $(document).ready(function(){
      $('ul.sub-menu').hide(function(){
      $('nav ul li').click(function(){
          $(this).children('ul.sub-menu').slideToggle(500);
      })
    })
  })
</script>

我更改的行是$(this).children('ul.sub-menu').slideToggle(500);。在事件处理程序中，this引用触发事件的元素，children函数通过ul.sub-menu条件查找其后代。

Answer 2

查看更新后的JSfiddle here

您的Javascript正在寻找元素树中的第一个ul.submenu，即图库ul.sub-menu。您需要告诉它要查找您刚刚点击的ul.sub-menu小时候的li：

$('nav ul li').click(function(){
    $('ul.sub-menu', this).slideToggle(500); // 'this' looks at what you just clicked
});

您还拥有hide()功能，可隐藏显示子菜单功能周围的所有ul.sub-menu。这意味着当您单击以显示子菜单时，它将显示它，然后立即隐藏它。我将其更改为独奏功能，该功能仅隐藏文档加载中的所有子菜单。这是JS现在应该看起来的样子：

$(document).ready(function(){
   $('ul.sub-menu').hide();
   $('nav ul li').click(function(){
      $('ul.sub-menu', this).slideToggle(500);
   });
});

修复Jquery响应菜单

2 个答案: