jQuery手風琴在當前容器上顯示/隱藏

Question

我爲FAQ頁面創建了一個手風琴，當單擊某個問題時，我已設法獲得顯示/隱藏的問題/答案，當其他人隱藏並且當前問題是打開。

唯一的問題是，如果您嘗試關閉當前打開的問題，標題仍然突出顯示，因爲它仍被定義爲當前問題。

我該如何解決這個問題？

見我的小提琴：https://jsfiddle.net/1cqk1540/1/

的jQuery：

// Hide the answers (expanded content) 
$(".content .accordion span").hide(); 

// On question click 
$(".content .accordion .question").click(function(){ 
    // If the next element to the question is visible 
    if(false == $(this).next().is(':visible')) { 
     // Slide the answer up 
     $('.content .accordion span').slideUp(300); 
    } 

    // Toggle the slide of the next element to the question 
    $(this).next().slideToggle(300); 

    // Remove current class from the previous accordion container 
    $('.content .accordion.current').removeClass('current'); 

    // Remove current class from the current accordion container 
    $(this).parent().addClass('current'); 
}); 

Answer 1

這是我改變：

$('.content .accordion.current').not($(this).parent().toggleClass('current')).removeClass('current'); 

是被點擊使用toggleClass功能之一，而其他人都使用removeClass功能。

演示：

// Hide the answers (expanded content) 
 

 
$(".content .accordion span").hide(); 
 

 
// On question click 
 

 
$(".content .accordion .question").click(function() { 
 

 
    // If the next element to the question is visible 
 

 
    if (false == $(this).next().is(':visible')) { 
 

 
    // Slide the answer up 
 

 
    $('.content .accordion span').slideUp(300); 
 

 
    } 
 

 
    // Toggle the slide of the next element to the question 
 

 
    $(this).next().slideToggle(300); 
 

 
    // Remove current class from the previous accordion container 
 

 
    $('.content .accordion.current').not($(this).parent().toggleClass('current')).removeClass('current'); 
 

 
    // Remove current class from the current accordion container \t 
 

 
});

.accordion { 
 
    border: 1px solid #666666; 
 
    margin-bottom: 10px; 
 
    padding: 10px 
 
} 
 

 
.accordion.current .question { 
 
    color: #FF0000; 
 
} 
 

 
.accordion .question { 
 
    color: #333333; 
 
    text-decoration: none; 
 
    font-weight: 700; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 

 
.accordion span { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="content"> 
 
    <div class="accordion"> 
 
    <a href="#q" class="question">Q1 Aenean varius tincidunt arcu?</a> 
 
    <span> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, ipsum id aliquet ornare, nibh leo luctus turpis, sed consectetur libero diam et est. In hac habitasse platea dictumst. Donec nibh arcu, porttitor at finibus id, consectetur ac nunc. Aenean varius tincidunt arcu, ac egestas quam posuere eu. Maecenas congue mollis mattis. Quisque sollicitudin lectus consectetur mi auctor, ac feugiat velit convallis.</p> 
 
    </span> 
 
    </div> 
 
    <div class="accordion"> 
 
    <a href="#q" class="question">Q2 Aenean varius tincidunt arcu?</a> 
 
    <span> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis, ipsum id aliquet ornare, nibh leo luctus turpis, sed consectetur libero diam et est. In hac habitasse platea dictumst. Donec nibh arcu, porttitor at finibus id, consectetur ac nunc. Aenean varius tincidunt arcu, ac egestas quam posuere eu. Maecenas congue mollis mattis. Quisque sollicitudin lectus consectetur mi auctor, ac feugiat velit convallis.</p> 
 
    </span> 
 
    </div> 
 
</div>

Answer 2

你每次點擊添加類.current。正確的代碼https://jsfiddle.net/xbh7bx02/

if(!$(this).parent().hasClass('current')) 
    { 
     $('.content .accordion.current').removeClass('current'); 
     // Remove current class from the current accordion container 
     $(this).parent().addClass('current'); 
    } else { 
     $('.content .accordion.current').removeClass('current'); 
     // Remove current class from the current accordion container 
    }