Xwab
Форумыnavigate_nextJavaScript

addClass() - removeClass() (jQuery)
Сообщения
Istsam

Доброго времени суток.
Есть код:

$(document).ready(function(){
   $('#navmenu li').hover(
      function(){
            $('ul', this).fadeIn(300);
        },
        function(){
          $('ul', this).fadeOut(300);
        }
   )
});

Который организовывает выпадающее меню.
Есть css:

ul#navmenu ul li a.active {
background-color: red;
}

И вот такой вывод:


<ul id="navmenu">
      <li><a>Категории</a>
        <ul><li><a href="/products/test" title="test">Машины</a><ul><li><a href="/products/bmw" title="bmw">bmw</a><ul><li><a href="/products/nizkaya" title="nizkaya">низкая</a></li><li><a href="/products/vysokaya" title="vysokaya">высокая</a></li></ul></li><li><a href="/products/audio" title="audio">audi</a><ul><li><a href="/products/qweqwe" title="qweqwe">qweqwe</a></li></ul></li><li><a href="/products/shesterka" title="shesterka">shesterka</a></li></ul></li><li><a href="/products/test1" title="test1">Игрушки</a><ul><li><a href="/products/toys" title="toys">toys</a><ul><li><a href="/products/123" title="123">123</a></li><li><a href="/products/333" title="333">333</a></li><li><a href="/products/1231233" title="1231233">1231233</a></li></ul></li></ul></li><li><a href="/products/test2" title="test2">Вертолеты</a></li></ul>      </li>
      <li>
        <a href="#">Оплата</a>
      </li>
      <li>
        <a href="#">Доставка</a>
      </li>
      <li>
        <a href="#">Отзывы</a>
      </li>
      <li>
        <a href="#">Контакты</a>
      </li>
    </ul>
  </nav>


Нужно, с помощью Js к элементам активным добавлять css класс active.
Пробовал вот так:

$(document).ready(function(){
   $('#navmenu li').hover(
      function(){
         $(this).addClass('active');
            $('ul', this).fadeIn(300);
        },
        function(){
          $('ul', this).fadeOut(300);
        }
   )
});


Но не пашет.
добавлено спустя 2 минуты:
смайлы появились
добавлено спустя 5 секунд:

добавлено спустя 10 секунд:
блять да где рожи то смешные

07 Май 2013, 14:33
u99

$('ul', this).addClass('active').fadeIn(300); не?

07 Май 2013, 15:20
Istsam

Смерти моей хочешь?
добавлено спустя 56 секунд:

добавлено спустя 9 секунд:
о рожи заработали
добавлено спустя 3 секунды:

добавлено спустя 17 часов 36 минут:
Спс вам профы спецы.
Видимо пизда форуму пизда пришла.
Олдфаги скажите, куда вы утопали все?

08 Май 2013, 9:02
Akdmeh

Заходил несколько раз.
Если бы ты убрал лишний код в первом посте - я бы посмотрел.
Мало того, что код не отформатирован, так еще и в разметке черт ногу сломит.
Поэтому особо разбираться желания нету.
добавлено спустя 8 минут:
Думаю, твоя проблема состоит в непонимании контекста this.
Смотри:
http://api.jquery.com/hover/
В качестве аргумента дается не сам object, а event.object, то есть, объект события, который имеет свои параметры.
Поэтому нужно использовать не this, а:
$('#navmenu li').hover(
      function(event){
         $(event.target).addClass('active');
            $('ul', this).fadeIn(300);
        },
        function(event){
          $(event.target).removeClass('active');
          $('ul', this).fadeOut(300);
        }
)
добавлено спустя 14 минут:
Щас посижу с дебаггером, раз сам не можешь найти.

08 Май 2013, 10:17
Istsam

Akdmeh, не корректно, но уже почти то что нужно.

08 Май 2013, 10:27
Akdmeh

Короче, тебе нужно копать в сторону this и искать потом элемент, который надо отобразить через parent() или children()
Просто ты плохо отформатировал код, я иерархию меню не могу понять. Сделаешь нормально - может посмотрю еще.
добавлено спустя 36 секунд:
И вообще не совсем понимаю, чем тебе не угодило стандартное меню с Jquery UI

08 Май 2013, 10:29
Istsam

Akdmeh, я зарядился таким подходом, что если не понимаешь как это работает, нельзя использовать пока не поймешь как работает.
добавлено спустя 40 секунд:
Akdmeh, когда делаешь сервис который будет работать несколько лет, серьезно задумываешься о том, чтобы знать как это все будет работать.

08 Май 2013, 10:33
Akdmeh

Короче, даю тебе направление для поисков (для этого форумы и создаются, если хочешь готовое решение - тебе на фриланс).
При наводке на li ты вызываешь функцию:
function(event){
    $(event.target).addClass('active');
    //Дописать код здесь!
}
В event.target будет находится li, на который ты навел указатель. Затем берем $(event.target), вызываем children или необходимый метод, чтобы найти то, что нужно показать (я не совсем понял, что именно тебе нужно, по ходу меню ul). Затем уже его показываешь fadeIn(300);
добавлено спустя 3 минуты:
И вообще, это называется писать велосипеды.
Ничто не мешает тебе вместо того, чтобы тратить время на меню, заняться чем-то более полезным, и разобраться в готовом работающем меню

08 Май 2013, 10:41
Istsam

Akdmeh, "мы не samsung, у apple не воруем".
Это так, смысл ты понял.
Свое хочется.
добавлено спустя 1 минуту:
некоторые решения, которые я находил, не совместимы с Ie.
Данный метод в IE работает на ура.
У нашей фирмы много клиентов ориентированных на IE, Opera

08 Май 2013, 10:44
Ответить на тему