0

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

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

具有单击功能的下一个代码仅适用于 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。

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

4

2 回答 2

2

在这种情况下，您不能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");
}
于 2013-10-20T23:33:38.813 回答
0

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

谢谢！

于 2013-10-21T10:13:41.037 回答