トグルをクリックしてクラスを非表示にすることはできませんか？

Question

私はこのスクリプトを持っている：

<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を非表示にする可能性を追加したい：

$(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です。今すぐ1つの.infoクラスをクリックすると、.conteudoクラスが表示され、次/前の.infoクラスがクリックされたときに非表示になるので、クラスを2回クリックして.conteudoクラスを隠すことができるようにしたいと考えていますそれが既に持っている表示/非表示の効果を混乱させる。

私はjQueryを初めて使っています。この資料を覚えようとしていますので、よろしくお願いします。私はこれについて助けを求めましたが、実際に役立つものは何も見つかりませんでした。私はあなたの時間を無駄にしている場合、ありがとう、ごめんなさい。

Answer 1

あなたがアクティブな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>

Answer 2

あなたはhasClassに確認し、あなたの行動を元に戻すことができます。

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

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

 
<div> 
 
    <div class="info nome">INFO</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">INFO</div> 
 
    <div class="conteudo texto">this is where the content goes</div> 
 
</div>

Answer 3

これはさらに簡単です：ところで

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