单击切换按钮无法隐藏课程？

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> 

我想要添加到隐藏.conteudo点击同一.info类时的可能性。现在，无论何时点击一个.info课程，其类别.conteudo在下一个/上一个.info课程点击时都会显示并隐藏，所以我想让人们可以隐藏.conteudo课程，方法是无需点击其.info类中的两次搞乱了它已经有的显示/隐藏效果。

我是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>

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); 
    } 
    }); 
});