jQuery slideToggle函数仅在相关元素上运行

Question

我想slideToggle只在menu靠近任何点击menu-title元素的具体元素上运行jQuery 函数.

<div class="dropdown">
    <h4 class="menu-title">Menu 1</h4>
    <ul class="menu>
        <li class="menu-item">
           <a class="nav-link" href="#">1</a>
        </li>
        <li class="menu-item">
           <a class="nav-link" href="#">2</a>
        </li>
        <li class="menu-item">
           <a class="nav-link" href="#">3</a>
        </li>
    </ul>
</div>
 <div class="dropdown">
    <h4 class="menu-title">Menu 2</h4>
    <ul class="menu>
        <li class="menu-item">
            <a class="nav-link" href="#">1</a>
        </li>
        <li class="menu-item">
            <a class="nav-link" href="#">2</a>
        </li>
        <li class="menu-item">
            <a class="nav-link" href="#">3</a>
        </li>
    </ul>
</div>

<style>
.dropdown-menu{
   display: none;
}
</style>

$('.menu-title').click(function(){
  $('.menu').slideToggle();
});

问题是当点击其中一个标题时,它正在处理所有ul元素.

你能指导我如何使每个ul分开工作吗？

Answer 1

使用兄弟姐妹的方法

$(this).siblings('.menu').slideToggle();

注意:你的html有错误,你忘了在html中关闭菜单类 - 应该是class="menu"- ,你的css也是错的,应该.dropdown .menu 不是.dropdown-menu.

代码:https://codepen.io/peker-ercan/pen/MPvgYp