如何在不同列表中显示jQuery弹出窗口

Question

我需要帮助...当我点击.btm-arrow类时，我只想要那个弹出框显示。但现在它显示每个弹出框。我在课堂上使用这就是它冲突的原因。

Html代码

<div class="TableData">
<ul>
<li>SURAT AL-FATIHAH</li>
<li>SURAT AL-FATIHAH</li>
</ul>
<p><input type="text" name="#" placeholder="Type Your Item"></p>
</div>
<a href="#">
<i class="fa fa-arrow-circle-o-down btm-arrow" aria-hidden="true"></i>
</a>

Jquery代码

<script src="js/jquery.js"></script>
<script>
$(function(){
$('.btm-arrow').click(function(){
$('.TableData').toggle();;
});
});
</script>

Answer 1

您可以使用jquery的nearest（）和prev（）方法找到此解决方案。

 $('.btm-arrow').click(function(){

    $(this).closest("a").prev().toggle();;
 });

你可以在这里找到工作实例 - https://jsfiddle.net/20rx1nvp/2/