2016-03-11 33 views
0

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

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

我該如何解決這個問題?

見我的小提琴: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'); 
}); 

回答

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>

+0

這是什麼新的生產線的作用:如果目前的手風琴不是當前的手風琴(相同手風琴)的直屬母公司切換當前類,如果當前類設置,那麼它就會被刪除? – bigdaveygeorge

+0

擁有「current」類的所有元素都會被刪除。除了被點擊的人('.not()'),那個人得到一個切換。取決於手風琴是否開放。如果你想我可以用更少的代碼來寫,請告訴我。 – NiZa

1

你每次點擊添加類.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 
    }