jQuery 在子级之前触发父函数（slideUp 和 slideDown）

Question

简而言之，我有 2 个主要链接（私家车和商用车），每个链接都有一个特定的类附加到它们的 anchor 标签。在第二个 sublink ul 的 li 标记上使用相同的类名，以将它们与两个顶部链接匹配。这个想法是每次点击主链接时，都会发生以下情况：

1. 子链接 ul 向上滑动
2. 里面的所有li都隐藏了
3. 显示了对应主链接类的li
4. 子链接 ul 向下滑动，只显示正确的 li

不幸的是，这不是函数触发的顺序。会发生什么：

1. 子链接 ul 向上滑动
2. 子链接 ul 向下滑动
3. 里面的所有列表元素都被隐藏了
4. 相关列表元素向下滑动

知道如何让订单按我的意愿开火吗？

这里是代码

$('.insurer ul.toplinks a').click(function(e) {
  e.preventDefault();
  var sublinkCategory = $(this).attr('class'),
    subLinksToShow = $(this).parent().parent().parent().find('li.' + sublinkCategory),
    subLinksList = $(this).parent().parent().parent().find('ul.sublinks'),
    allLinks = $(subLinksList).find('li');

  // First time
  if ($(subLinksList).is(":hidden")) {
    $(subLinksToShow).slideDown();
    $(subLinksList).slideDown();
    // List visible but new links invisible  
  } else if ($(subLinksList).is(":visible") && $(subLinksToShow).is(":hidden")) {
    $(subLinksList).slideUp(function() {
      $(allLinks).hide(function() {
        $(subLinksList).slideDown(function() {
          $(subLinksToShow).slideDown();
        });
      });
    });
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
  <li><a href="#" class="privatecar">Private Car</a></li>
  <li><a href="#" class="commercialvehicle">Commercial Vehicle</a></li>
</ul>
<ul class="sublinks">
  <li class="privatecar"><a href="private/key-facts.pdf">Key Facts</a></li>
  <li class="privatecar"><a href="private/policy-wording.pdf">Policy Wording</a></li>
  <li class="commercialvehicle"><a href="commercial/key-facts.pdf">Key Facts</a></li>
  <li class="commercialvehicle"><a href="commercial/policy-wording.pdf">Policy Wording</a></li>
</ul>

Answer 1

您的代码无法正常工作，而我们没有完整的代码。

这可行，请注意代码中的 cmets 以查看注释下方的行发生了什么。

$(function() {
  // hide by default
  $('.sublinks').hide();
  
  $('.toplinks a').on('click', function(e) {
    e.preventDefault();
    // get the classname
    var cl = $(this).attr('class');
    
    // slide up
    $('.sublinks').slideUp("slow", function() {
      //on callback (= after slide up is done)
      // show all links
      $('.sublinks li').show();
      // hide the ones not having the right class
      $('.sublinks li:not(.'+cl+')').hide();
      // slide down again
      $('.sublinks').slideDown("slow");
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="toplinks">
  <li><a href="#" class="privatecar">Private Car</a></li>
  <li><a href="#" class="commercialvehicle">Commercial Vehicle</a></li>
</ul>
<ul class="sublinks">
  <li class="privatecar"><a href="private/key-facts.pdf">private Key Facts</a></li>
  <li class="privatecar"><a href="private/policy-wording.pdf">private Policy Wording</a></li>
  <li class="commercialvehicle"><a href="commercial/key-facts.pdf">commercial Key Facts</a></li>
  <li class="commercialvehicle"><a href="commercial/policy-wording.pdf">commercial Policy Wording</a></li>
</ul>