Question

下面是简单的jQuery Accordion：

(function ($) {

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

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

})(jQuery);

<dl class="accordion">
<dt><a href="">Panel 1</a></dt>

    <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="">Panel 2</a></dt>

    <dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="">Panel 3</a></dt>

    <dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>

问题是，当您单击面板1时，<dd>会消耗，但如果再次单击以关闭它（面板1），<dd>将隐藏并再次消耗。这是错误的，如果用户再次点击面板1，它应该关闭，那么如果标签打开，如何关闭<dd>？

JSFiddle：link

Answer 1

问题在于行allPanels.slideUp()，您应该忽略此操作的当前面板

尝试

jQuery(function ($) {

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

    $('.accordion > dt > a').click(function () {
        var $target = $(this).parent().next().stop(true, true).slideToggle();;
        allPanels.not($target).stop(true, true).slideUp();
        return false;
    });

})

演示：Fiddle

Answer 2

<强>的JavaScript

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

  $('.accordion > dt > a').click(function () 
   {
    allPanels.not( $(this).parent().next().stop(true, true).slideToggle()).stop(true,true).slideUp();
    return false;
   });
})(jQuery);

Answer 3

您可以使用slideToggle()

选中此http://jsfiddle.net/b4g9U/4/

jQuery Accordion - 无法关闭当前<dt> </dt>

3 个答案: