2015-09-07 154 views
0

我從一個教程(這是我第一次進入jQuery的第一步)幫助下從頭開始了手風琴元素,我想要的手風琴元素在點擊時打開,然後如果打開,再次點擊時關閉。下面是我得到了什麼:打開手風琴上的點擊,關閉手風琴上的第二次點擊

jQuery的

(function($) { 

    var allPanels = $('.accordion > dd').hide(); 

    $('.accordion > dt > a').click(function() { 
    allPanels.slideUp(300); 
    $(this).parent().next().slideDown(300) 
    return false 
    }); 

})(jQuery); 

HTML

<dl class="accordion"> 
<dt><a href="">Question</a></dt> 
<dd>Answer</dd> 
<dl> 

CSS

.accordion { 
    dt, dd { 
     border-bottom: 0; 
     &:last-of-type { 
     border-bottom: 1px solid black; 
     } 
     a { 
     display: block; 
     color: black; 
     font-weight: bold; 
     } 
    } 
    dd { 
    border-top: 0; 
    &:last-of-type { 
     border-top: 1px solid white; 
     position: relative; 
     top: -1px; 
    } 
    } 
} 

同樣在jsFDdle這裏:https://jsfiddle.net/j1f341ku/

當前,當你點擊已經打開的元素時,它會關閉並重新打開。我怎麼能這樣做,當一個已經打開的元素被點擊,它關閉,並不會重新打開?提前致謝!

(PS我在這裏找到了類似的問題的建議通常提供的製作方式不同的手風琴解決方案。)

(PPS長的時間的讀者,首次海報!溫柔, 。對不起,如果我犯任何錯誤)

回答

0

我已經更新了你的小提琴:

嘗試 https://jsfiddle.net/j1f341ku/4/

(function ($) { 

    var $allPanels = $('.accordion > dd').hide(); 

    $('.accordion > dt > a').click(function (e) { 
     e.preventDefault(); 
     $allPanels.slideToggle(300); 
    }); 

})(jQuery); 

這裏有一個更新的提琴應解決您的錯誤(我加的小提琴爲例3題): https://jsfiddle.net/j1f341ku/5/

+0

jQuery的變量應該用「$」出來的最佳實踐的前綴,所以我補充說,到你的變量以及交換e.preventDefault()的返回false。希望這回答了你的問題! – KrakenDev

+0

非常感謝你,你真棒!我是jQuery全新的,我只是試圖通過我的方式崩潰。真的很感謝幫助。 –

+0

當然!這就是我們在這裏,給予和接受幫助:) – KrakenDev

相關問題