Почему не добавляется AddClass после нажатия списка?

-1

Я, похоже, не понимаю этого, у меня есть следующий код (немного беспорядочный, начинающийся с javascript), над которым я работал, я заставил его работать с меню переключения, и он отлично работает для first li drop down, но для остальных трех это не так, я хочу знать, как я могу это исправить?Почему не добавляется AddClass после нажатия списка?

Есть 4 капли спады, который работает с .click и only the first one активирует AddClass ..

$(document).ready(function(){ 
    $(".mobileFirst").click(function(e) { 
     $(".mobile-menu > .menu-container > ul").toggle(); 
    }); 

    $(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").click(function(e) 
    { 
     $(".mobile-menu > .menu-container > ul > li:nth-of-type(3) .menu-sub").toggle(function(){ 
      if ($('.menu-sub').css("display") == "block") 
      { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").addClass("li-bottom-fix"); 
      } else { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").removeClass("li-bottom-fix"); 
      } 
     }); 
    }); 

    $(".mobile-menu > .menu-container > ul > li:nth-of-type(4)").click(function(e) 
    { 
     $(".mobile-menu > .menu-container > ul > li:nth-of-type(4) .menu-sub").toggle(function(){ 
      if ($('.menu-sub').css("display") == "block") 
      { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(4)").addClass("li-bottom-fix"); 
      } else { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(4)").removeClass("li-bottom-fix"); 
      } 
     }); 
    }); 

    $(".mobile-menu > .menu-container > ul > li:nth-of-type(6)").click(function(e) 
    { 
     $(".mobile-menu > .menu-container > ul > li:nth-of-type(6) .menu-sub").toggle(function(){ 
      if ($('.menu-sub').css("display") == "block") 
      { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(6)").addClass("li-bottom-fix"); 
      } else { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(6)").removeClass("li-bottom-fix"); 
      } 
     }); 
    }); 
    $(".mobile-menu > .menu-container > ul > li:nth-of-type(7)").click(function(e) 
    { 
     $(".mobile-menu > .menu-container > ul > li:nth-of-type(7) .menu-sub").toggle(function(){ 
      if ($('.menu-sub').css("display") == "block") 
      { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(7)").addClass("li-bottom-fix"); 
      } else { 
       $(".mobile-menu > .menu-container > ul > li:nth-of-type(7)").removeClass("li-bottom-fix"); 
      } 
     }); 
    }); 
});

Я не включил любой HTML, потому что, как я уже сказал, это явно добавляет Li- bottom-fix к первой кнопке, но для остальных трех это не так.

источник

2015-09-22 iBrazilian2

'$ ('. Menu-sub'). Css (" display ") ==" block "' всегда будет сравнивать стиль CSS 'display' элемента ** first **' .menu-sub' в документ. Из документации '' .css '' (http://api.jquery.com/css/): * «Получить значение свойства вычисленного стиля для элемента ** first ** в наборе согласованных элементов [. ..] "* –

Отключить тему, потому что« почему этот код не работает? » – bhspencer

@FelixKling, это имеет большой смысл .. спасибо, что поняли, что для меня. Я, хотя, учитывая тот факт, что он выбирал конкретный ли с nth-of-type, он будет сосредоточен только на дочерних элементах. – iBrazilian2

$('.menu-sub').css("display") == "block"

всегда будет сравнивать стиль display CSS в первого.menu-sub элемента в документе. Из .css documentation:

Получить значение вычисляемого свойства стиля для первого элемента в наборе соответствующих элементов [...]

Если вы хотите обратиться к элементу под названием toggle на, используйте this:

$(this).css("display") == "block"

от .toggle documentation:

Если поставлено, обратный вызов запускается после завершения анимации. Это может быть полезно для последовательного объединения различных анимаций. Обратный вызов не отправляет никаких аргументов, но this установлен на анимированный элемент DOM.

И вместо того, чтобы повторять селекторе вместо обработчика, просто сохранить ссылку на нажатую элемент:

$(".mobile-menu > .menu-container > ul > li:nth-of-type(3)").click(function(e) { 
    var $clickedElement = $(this); 
    $clickedElement.find(".menu-sub").toggle(function() { 
     $clickedElement.toggleClass(
      "li-bottom-fix", 
      $(this).css("display") === "block" 
     ); 
    }); 
});

Если вы можете, вы должны дать все те элементы один и тот же класс, так что вам не нужно повторять логику. По крайней мере, назовите обработчик событий и повторно используйте его (теперь, когда он обобщен).

источник

2015-09-22 01:11:49

Почему не добавляется AddClass после нажатия списка?

ответ

Смежные вопросы