1

下面是简单的 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：链接

4

3 回答 3

3

问题出在线路上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;
    });

})

演示：小提琴

于 2013-11-12T06:21:59.347 回答
0

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);
于 2013-11-12T06:29:49.977 回答
0

您可以使用slideToggle()

检查这个http://jsfiddle.net/b4g9U/4/

于 2013-11-12T06:41:54.690 回答