Question

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

否则，如果没有nav-title类的元素有一个活动类，找到第一个元素为.sub-nav，显示它，上去，将活动类添加到.nav-title < / p>

下一个带有点击功能的代码只是fint，它只是第一个没有..我试图在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。

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

Answer 1

您不能以您认为可以的方式在此上下文中使用this。 this内的if不是导航。您还在.中nav-title之前find。这样做：

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

Answer 2

我使用了James Montagne的答案，它运作得很好，看起来我误解了这个(this)并忘记了我班前的一个点。

谢谢！

使用活动类检查元素并向下滑动其下一个元素

2 个答案: