JavaScript:点击时显示/隐藏元素

Question

当我单击标题时，我需要显示/隐藏一些文本部分。到目前为止，我只能一次显示或隐藏它们，而不是单独显示或隐藏它们(即单击标题 1、隐藏文本部分 1 等)。我该怎么办？

这就是我所拥有的:

<div class="content">

            <div class="title"><a href="#">Section 1</a>        
            </div>

            <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>

            <div class="title"><a href="#">Section 2</a>    
            </div>

            <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>

            <div class="title"><a href="#">Section 3</a>
            </div>

            <div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
            </div>

        </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script> 

    jQuery(document).ready(function(){
        $('.title').click(function(){
            $('.text').toggle();
});

    });

    </script>

Answer 1

您需要使用this来引用被单击的元素。所以在你的情况下 $(this).next('.text').toggle();:

jQuery(document).ready(function() {
  $('.title').click(function() {
    $(this).next('.text').toggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="title"><a href="#">Section 1</a>
</div>

<div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

<div class="title"><a href="#">Section 2</a>
</div>

<div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

<div class="title"><a href="#">Section 3</a>
</div>

<div class="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
</div>

</div>