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

Question

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

sublinkul向上滑动
里面所有的li都被隐藏了
对应主linkclass的里显示
sublink ul 向下滑动只显示正确的 li's

不幸的是，这不是函数触发的顺序。发生的事情是这样的：

sublink ul向上滑动
sublink ul向下滑动
隐藏里面的所有列表元素
相关列表元素向下滑动

关于如何让订单按照我的意愿开火有什么想法吗？

这是代码

$('.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

我们没有完整的代码，您的代码无法运行。

这行得通，注意代码中的注释，看看注释下的行会发生什么。

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

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

jQuery firing parent functions before children (slideUp and slideDown)

javascript

jquery

html

slidedown

slideup