Question

我正在使用CSS-Tricks中的Simple jQuery Accordion，我想知道如何在点击dt链接时关闭活动面板。我正在使用它的应用程序是侧边栏中的菜单，无法垂直滚动，因此如果面板的内容太大，它可能会将其他面板推到用户无法触及的位置。

其次，我希望能够将手风琴设置为根据媒体查询扩展所有项目。如果没有对插件进行重大更改，有人可以告诉我这是否可行吗？

这是jQuery：

(function($) {

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

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

})(jQuery);

HTML：

<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>

CSS：

.accordion {
  margin: 50px;
}

.accordian dt, dd {
  padding: 10px;
  border: 1px solid black;
  border-bottom: 0; 
}

.accordian dt:last-of-type, .accordian dd:last-of-type {
  border-bottom: 1px solid black; 
}

.accordian a {
  display: block;
  color: black;
  font-weight: bold;
}

.accordian dd {
  border-top: 0; 
  font-size: 12px; 
}
.accordian dd:last-of-type {
  border-top: 1px solid white;
  position: relative;
  top: -1px;
}

Answer 1

在您执行任何操作之前检查面板是否已打开，然后关闭该面板，或关闭其他面板并打开新面板。

(function($) {

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

  $('.accordion > dt > a').click(function() {
    var $targetPanel = $(this).parent().next();
      if ($targetPanel.is(':visible')) {
        $targetPanel.slideUp();
      } else {          
        allPanels.slideUp();
        $targetPanel.slideDown();
      }
    return false;
  });

})(jQuery);

Answer 2

(function($) {

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

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

})(jQuery);

我还没有测试过，但对我来说更有意义。

点击即可关闭jQuery手风琴活动面板

2 个答案: