javascript - 通过 Jquery 在点击时显示 div 一次仅适用于 1 个 div

Question

我正在使用 wordpress 并且在我的循环中我有一个可点击的链接来切换 div 以显示和隐藏内容，因为这是在循环中它为循环中的每个项目使用相同的类所以当我切换一个链接，它会显示所有内容。

<div class="additional-info">Additinal Information</div>

<div class="additional-info-box">
   <?php echo $additional_info; ?>
</div>


<script type="text/javascript">
$(document).ready(
    function(){
        $(".additional-info").click(function () {
            $(".additional-info-box").toggle();
        });
    })
</script>

因此，每个帖子都会生成附加信息类和附加信息框，但是当我单击任何附加信息 div 时，都会显示每个附加信息框。

Answer 1

尝试包装:

<div class="additional-info">
     Additinal Information
    <div class="additional-info-box">
      <?php echo $additional_info; ?>
    </div>
</div>

<script type="text/javascript">
$(document).ready(
    function(){
        $(".additional-info").click(function () {
            $(this).find(".additional-info-box").toggle();
        });
    })
</script>

只有点击的 .additional-info 才会显示其内容。

Live Demo