jquery - 修复 Jquery 响应式菜单

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-menu 元素向下滑动。需要指定只希望被点击元素的子元素向下滑动:

<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 条件查找其后代。