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

Question

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

1. 子链接ul 向上滑动
2. 里面所有的李都是隐藏的
3. 显示带有相应主链接类的li
4. 子链接ul向下滑动，仅显示正确的li

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

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

关于如何按照我的意愿获取命令的任何想法？

这是代码

KafkaStreams

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

Answer 1

在我们没有完整代码的情况下，您的代码无法使用。

这是有效的，请注意代码中的注释，以查看评论下的行发生了什么。

＆＃13;

＆＃13;

$(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");
    });
  });
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;