我有这个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”，他必须将ul的togle滑动到他下面，而不是每个人。
这是因为当您调用parent()时，两个UL都被视为它的兄弟。 您可以使用.first()方法获取选择器遇到的第一个ul实例。 所以您的SlidetToggle方法看起来像$(this).parent().siblings('ul').first（）。SlidetToggle（）；
查看HTML结构，可以使用parent()和next()jQuery函数来针对UL。
您在代码中所做的是:转到parent（div），然后获取所有兄弟的ul。
你需要的是:
null
$(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 -->