Question

我有几个手风琴设置，我只想在整个页面中打开一个。我认为.not（）方法可以实现我想要的，但它只是立即关闭当前的div。

如果有人能够发现我出错的地方，那就是我所拥有的：

JS

$( document ).ajaxComplete(function() {
$('.accordion-toggle').click(function(){

  //Expand or collapse this panel
  $(this).next().stop().slideToggle('1000');
  $(this).toggleClass('active').siblings().removeClass('active');

  //Hide the other panels
  $('.accordion-content').not(this).slideUp('1000');

});
});

HTML

<div id="location1">

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

</div>



<div id="location2">

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

<h3 class="accordion-toggle">Opening times <i class="fa fa-angle-down"></i></h3>
<div class="accordion-content">
<p>List of products available here!</p>
</div>

</div>

CSS

.accordion-content {
  display: none;
  padding:20px 0;
  border-bottom: 1px solid #d4d5d7;
}

.accordion-content.default {display: block;}

.accordion-toggle {
  cursor: pointer;
  font-size:18px;
  padding:10px 0;
  margin:0;
  border-bottom:1px solid #d4d5d7;
  position:relative;
}

Answer 1

你非常接近。你应该改变这一行

$('.accordion-content').not(this).slideUp('1000');

To This：

$('.accordion-toggle').not(this).next().slideUp('1000');

由于您的点击功能已应用于accordion-toggle类，因此您必须定位该类，因为this是accordion-toggle类元素，并且您想要过滤掉所有元素不这个对象。这也将迫使您必须使用.next()方法，因为您正在寻找滑动DOM中的下一个元素。

修改1：

要删除所有active div中的#locationX类，您应该将此行分开

$(this).toggleClass('active').siblings().removeClass('active');

进入这个：

$('.active').not(this).removeClass('active');
$(this).toggleClass('active');

之前编写的方式，在active类切换到当前元素之后，它只会从所有兄弟元素中删除该类，这不会对其他div中的元素产生正确影响。它使脚本更长一些，但它会在切换当前元素上的类之前删除所有active类。

编辑2：

整个功能的最简单的解决方案可能如下：

$('.accordion-toggle').click(function(){

    //Expand or collapse this panel
    $(this).next().stop().slideToggle('1000');  

    //Hide the other panels
    $('.accordion-toggle').not(this).removeClass('active').next().slideUp('1000');
    $(this).toggleClass('active'); 

});

Answer 2

在您的情况下，this是toggle而不是内容（它也必须是$(this)而不仅仅是this，所以：

$('.accordion-content').not(this).slideUp('1000');

将匹配所有手风琴内容。

你可以尝试：

var $content = $(this).next('.accordion-content');   
$('.accordion-content').not($content).slideUp('1000');

作为一个注释，我会在处理程序的开头设置var $this = $(this);，这样就不会重复创建相对昂贵的jQuery对象。

选择除此元素外的所有元素

2 个答案: