在多个元素上制作 slideDown 和 slideUp 但只需点击一个特定的

Question

我有这个 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 -->

然后我有这个 javascript

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

 });

它可以工作，但如果我点击任何“.downArrow”。我希望它只适用于点击的“.downArrow”。 也就是说，对于单击的“.downArrow”，他必须将那个 ul 的切换器滑到他下方，而不是每个人。

Answer 1

查看您的 HTML 结构，您可以使用parent()和next() jQuery function 来定位 UL。

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

你需要的是：

• Go 到父母，
• 然后，取最近的 UL（在您的情况下为下一个）

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <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 --> <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 --> <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 --> <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 --> <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 -->

Answer 2

这是因为当您调用parent()时，两个 ul 都被视为其兄弟姐妹。 您可以使用.first()方法来获取选择器遇到的 ul 的第一个实例。 所以你的 slideToggle 方法看起来像$(this).parent().siblings('ul').first().slideToggle();