2015-09-07 132 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

相关问题