單擊切換按鈕無法隱藏課程？

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