Question

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

<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

使用兄弟姐妹方法

+---------+------------+----------+ | percode | add_date | nextdate | +---------+------------+----------+ | 1 | 2017-01-20 |2017-02-01| | 1 | 2017-02-01 |2017-03-15| | 1 | 2017-03-15 |2017-04-09| | 1 | 2017-04-09 |2018-10-12| | 2 | 2017-01-26 |2017-02-05| | 2 | 2017-02-05 |2017-02-28| | 2 | 2017-02-28 |2018-10-12| | 3 | 2017-01-26 |2018-10-12| +---------+------------+----------+

注意：您的html错误，您忘记了关闭html中的菜单类-它应该是$(this).siblings('.menu').slideToggle();-，也是css错误，应该是class="menu"而不是.dropdown .menu。

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

Answer 2

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

Answer 3

使用 jQuery

的同级功能

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

Answer 4

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

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

4 个答案: