javascript - 不能通过单击切换来隐藏类吗？

Question

我有这个脚本:

$(document).ready(function(){
    $(".info").click(function(){
        $(this).addClass('active');
        $(this).siblings('.conteudo').slideDown(500);
        $(this).parents().siblings().children('.conteudo').slideUp(450);
        $(this).parents().siblings().children('.info').removeClass('active');
    });
});

这是 HTML:

<div>
  <div class="info nome"></div>
  <div class="conteudo texto">conteudo</div>
</div>

<div>
  <div class="info nome"></div>
  <div class="conteudo ls">
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
  </div>
</div>

<div>
  <div class="info nome"></div>
  <div class="conteudo texto">this is where the content goes</div>
</div>

我想添加在单击相同的 .info 类时隐藏 .conteudo 的可能性。现在，只要单击一个 .info 类，它的 .conteudo 类就会显示，并在单击下一个/上一个 .info 类时隐藏，所以我想让人们可以通过在其 .info 类上单击两次来隐藏 .conteudo 类，而不会弄乱它已经具有的显示/隐藏效果。

我是 jQuery 的新手，我正在努力学习这些东西，所以请多多关照。我已经就此寻求帮助，但找不到任何真正有用的东西。非常感谢，如果我浪费了你的时间，我很抱歉。

Answer 1

你可以添加一个勾选是否点击了激活的，如果是则向上滑动:

$(document).ready(function(){
    $(".info").click(function(){
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).siblings('.conteudo').slideUp(450);
        } else {
            $(this).addClass('active');
            $(this).siblings('.conteudo').slideDown(500);
            $(this).parents().siblings().children('.conteudo').slideUp(450);
        $(this).parents().siblings().children('.info').removeClass('active');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="info nome">toggle</div>
  <div class="conteudo texto">conteudo</div>
</div>

<div>
  <div class="info nome">toggle</div>
  <div class="conteudo ls">
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
    <a href="/">adfsdf</a>
  </div>
</div>

<div>
  <div class="info nome">toggle</div>
  <div class="conteudo texto">this is where the content goes</div>
</div>