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

Question

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

<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