检查具有活动类的元素并向下滑动其下方的下一个元素

Question

我想检查具有类 nav-title 的元素是否也有一个活动类，如果为 true，则在具有 nav-title 类的元素下方向下滑动下一个元素（具有 .sub-nav 类） .

否则如果没有nav-title类的元素有active类，找到第一个.sub-nav类的元素，显示出来，往上走，把active类添加到.nav-title

---

下一个带有点击功能的代码可以正常工作，它只是第一个不工作的代码。我尝试在 html 文档本身中添加活动类，但是第一个元素和第二个激活类，没有子导航滑下来。

$(document).ready(function() {
  if ($("#nav").find("nav-title").hasClass("active")) {
    $(this).next(".sub-nav").slideDown("fast");
  } else {
    $("#nav").find(".sub-nav:first").show().prev().addClass("active");
  }

  $("#nav").on("click", ".nav-title", function() {
    $('.active').removeClass("active").next(".sub-nav").stop().slideUp("fast");
    $(this).toggleClass("active");
    $(this).next(".sub-nav").stop().slideDown("fast");
  });
});

有人可以帮忙吗？

顺便说一下，我的 html 看起来像这样：

<ul id="nav">
  <li class="nav-title">Title 1</li>
  <ul class="sub-nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
  </ul>
  <li class="nav-title active">Title 2</li>
  <ul class="sub-nav">
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a></li>
  </ul>
</ul>

我的代码可能有点乱，我只是边学 jquery。

哎呀！我做了一个小例子：http://fiddle.jshell.net/kcWA8/2/

Answer 1

我使用了 James Montagne 的答案，效果很好，看起来我误解了这个 (this) 并在我的班级前面忘记了一个点。

谢谢！

Answer 2

在这种情况下，您不能以您认为可以的方式使用this。 this 内部的 if 不是导航。您还缺少find 中nav-title 之前的.。改为这样做：

if ($("#nav").find(".nav-title").hasClass("active")) {
    $("#nav .nav-title.active").next(".sub-nav").slideDown("fast");
}

或者：

var $active = $("#nav .nav-title.active");

if ($active.length > 0) {
    $active.next(".sub-nav").slideDown("fast");
}