Javascript 在多个元素上进行向下滑动和向上滑动，但只需单击一个特定的

我有这个html代码

    <div class="toolsLink">
        <h1>title</h1>
        <img class="downArrow" src="arrow.png alt="arrow_logo">
    </div>
    <ul>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
    </ul>
    <div class="toolsLink">
        <h1>title</h1>
        <img class="downArrow" src="arrow.png alt="arrow_logo">
    </div>
    <ul>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
        <li>prova</li>
    </ul> <!-- and many others the same -->

它可以工作，但如果我单击任何“”。向下箭头。 如果它只在单击的“”向下箭头上工作，我希望这样。

---

也就是说，对于单击的“.downArrow”，他必须将ul的钮扣滑到他下方，而不是每个人。

这是因为当你调用

parent（）

时，两个uls都被认为是它的兄弟。您可以使用

.first（）

方法获取选择器遇到的ul的第一个实例。因此，您的slideToggle方法看起来像

$（this）.parent（）.sibbins（'ul'）.first（）.slideToggle（）

查看HTML结构，可以使用

parent（）

和

next（）

jQuery函数以UL为目标

您在代码中所做的是：转到父级（div），然后获取所有兄弟姐妹UL

您需要的是：

• 去家长那里
• 然后，选择最接近的UL（下一个例子）

$（文档）.ready（函数（）{
$（'.downArrow'）。单击（函数（）{
$（this.parent（）.next（）.slideToggle（）；
});
});

标题

普罗瓦
普罗瓦
普罗瓦
普罗瓦

标题

普罗瓦
普罗瓦
普罗瓦
普罗瓦

标题

普罗瓦
普罗瓦
普罗瓦
普罗瓦

标题

普罗瓦
普罗瓦
普罗瓦
普罗瓦

标题

普罗瓦
普罗瓦
普罗瓦
普罗瓦

标题

普罗瓦
普罗瓦
普罗瓦
普罗瓦

 $(document).ready(function () {
   $('.downArrow').click(function () {
     $(this).parent().siblings('ul').slideToggle();
   });

 });