Question

我一直试图对此进行一段时间的分析，似乎无法让它100％正常工作。当前代码显示.content区域没有任何崩溃。它还将页面向下移动到内容的中心（在这种情况下，如果不这样做，则会在页面下移动）。

$(document).ready(function() {
    $('.vl-option .vl-toggle-link').click(function(e) {
        e.preventDefault();
        $(this).closest('li').find('.content').not(':animated').slideToggle();
        $(this).closest('li').toggleClass('active');
    });
    $('.vl-option').bind('click',function(){
        var self = this;
        setTimeout(function() {
            theOffset = $(self).offset();
            $('body,html').animate({ scrollTop: theOffset.top - 20 });
        }, 310);
    });
});

我试过几种方法都无济于事。我将在下面列出一些（概念是找到任何兄弟姐妹并崩溃）：

$(this).siblings('li').find('.content').slideToggle();

实际上打破了原有的功能。然后我带着以下内容（尝试制作任何没有class =“active”崩溃的东西）：

if ( $(this).siblings('li').not('.active').find('.content').slideToggle(); ) //also tried .hide()

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

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。

Answer 1

一次只能在手风琴中打开一个内容，因此将.slideToggle()应用于所有<li>内容将违反此规则。我认为你的标记没问题，因为你只有两个<li>，所以它们只是交替滑动。但是如果你有更多，我认为有效的<li>应该只有.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完成后得到slideToggle()。请参阅此jsfiddle。

或者您也可以计算scrollTop：jsfiddle。

当课程被删除时，折叠手风琴“li”

1 个答案: