Проверьте элемент с классом active и сдвиньте следующий элемент под ним

Question

Проверьте элемент с классом active и сдвиньте следующий элемент под ним

0

Я хочу проверить, имеет ли элемент с классом nav-title активный класс, если true, сдвигает вниз следующий элемент (который имеет класс.sub-nav) под элементом с классом nav-title.

В противном случае, если ни один элемент с классом nav-title не имеет активного класса, найдите первый элемент с классом.sub-nav, покажите его, поднимитесь, добавьте класс active в.nav-title

Следующий код с функциями on-click работает только с 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/

Dueify 21 окт. 2013, в 01:27

Источник

Теги:

javascript

jquery

html

css

2 ответа

0

Я использовал ответ Джеймса Монтань, он работал отлично, похоже, я неправильно понял это (this) и забыл точку перед моим классом.

Благодарю!

Dueify 21 окт. 2013, в 08:40

Ещё вопросы

James Montagne · Accepted Answer · 2013-10-20T21-05-00.000Z

Вы не можете использовать this в этом контексте так, как вы думаете. this внутри if, а не nav. Ты тоже миришь . перед 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");
}

Спасибо большое, это сработало просто отлично, я использовал первый написанный вами код, и я понимаю, почему это имеет смысл. Ребята, вы думаете, мой код выглядит нормально? Может ли это быть оптимизировано или что-то в этом роде. В противном случае я отвечу на мой вопрос, потому что решение найдено.
Если у вас есть вопросы по оптимизации кода, вы можете попробовать codereview.stackexchange.com. Одна вещь, на которую я могу быстро указать, вы должны кэшировать ваши объекты jquery. Вместо того, чтобы вызывать $("#nav") несколько раз, присвойте его переменной и используйте повторно, чтобы избежать повторного запроса к dom. Аналогично тому, что я сделал во втором фрагменте кода.
Большое спасибо, имеет смысл для меня.