Javascript “折叠手风琴”；李",；当类被移除时

我已经试着整理了一段时间了，似乎无法让它100%正常工作。当前代码显示

.content

区域，没有任何折叠。它还将页面向下移动，以内容为中心（在本例中，如果您不这样做，则将内容置于折叠下）

我尝试了几种方法，但都没有效果。我将在下面列出一些（概念是找到任何兄弟姐妹并崩溃）：

这实际上破坏了原有的功能。然后我进行了以下操作（尝试在没有class=“active”折叠的情况下生成任何内容）：

这似乎对任何事情都没有影响

HTML很简单

<ul>
  <li class="lv-option active"><!-- when toggled, "active" class is applied... -->
    <a href="#" class="vl-toggle-link">Yada</a>
    <div class="content"></div>
  </li>
  <li class="lv-option"><!-- ...when untoggled, "active" class removed -->
    <a href="#" class="vl-toggle-link">Yada yada</a>
    <div class="content"></div>
  </li>
</ul>

.active

仅出于风格原因应用。它对任何东西的功能都没有影响。只需要能够在选择某个内容时将

:before

/

:after

作为目标

---

我只是不能把我的头围绕在jquery上。。。argh.

手风琴权限中一次只能打开一个内容，因此将

.slideToggle（）

应用于所有

内容将违反此规则。我认为您的标记没有问题，因为您只有两个

，所以它们只是交替滑动。但是如果您有更多，我认为活动的

应该是

.slideToggle（）

其他应该是

.slideUp（）

您可以将它们全部链接起来：

$('.vl-toggle-link').click(function(e) {
    e.preventDefault();
    //find the sibling content apply slideToggle, then move to their parent and add active
    $(this).siblings('.content').slideToggle().parent('li').addClass('active')
    // go through all the siblings of their parent and remove active, then slideUp their child content
    .siblings('li').removeClass('active').children('.content').slideUp();    
});

我还发现您的

.animate（{scrollTop}）

工作不正常，因为它正在获取旧的

offset（）.top

值。我认为您应该在

滑块切换（）完成后获取
offset（）.top
。看这个

或者你也可以计算scrollTop:。
我写这个插件就是为了这个目的。它的超轻重量和简单的谢谢，我会看看它。我通常会使用type=“radio”和css构建一个手风琴，但我真的在尝试使用jquery，所以在这个项目中使用了它。除了scrollTop滚动错误的方向外，这非常有效，感谢您解释链接背后的思想过程，但我有一个问题。使用scrollTop与Offset（）.top相比有哪些优点/缺点？没有批评任何一种方法，只是为了获取信息，因为我不知道。scrollTop小提琴实际上有一个与我想要的相反的卷轴。偏移量（）。最上面的小提琴工作得很好。嗯。。我看不出方向有什么不同。这两种方法之间的区别在于，使用
offset（）.top
我们将在
滑动切换完成后设置滚动动画。另一方面，计算的
scrollTop
方法与
slideToggle
同时启动。
if ( $(this).siblings('li').not('.active').find('.content').slideToggle(); ) //also tried .hide()

<ul>
  <li class="lv-option active"><!-- when toggled, "active" class is applied... -->
    <a href="#" class="vl-toggle-link">Yada</a>
    <div class="content"></div>
  </li>
  <li class="lv-option"><!-- ...when untoggled, "active" class removed -->
    <a href="#" class="vl-toggle-link">Yada yada</a>
    <div class="content"></div>
  </li>
</ul>

$('.vl-toggle-link').click(function(e) {
    e.preventDefault();
    //find the sibling content apply slideToggle, then move to their parent and add active
    $(this).siblings('.content').slideToggle().parent('li').addClass('active')
    // go through all the siblings of their parent and remove active, then slideUp their child content
    .siblings('li').removeClass('active').children('.content').slideUp();    
});