addClass() - removeClass() (jQuery)
Istsam
07 Май 2013, 14:33
Доброго времени суток.
Есть код:

$(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 минуты:
 :sir: смайлы появились 
добавлено спустя 5 секунд:
 :tf: 
добавлено спустя 10 секунд:
 блять да где рожи то смешные
---------------
u99
07 Май 2013, 15:20
$('ul', this).addClass('active').fadeIn(300); не?
---------------
Istsam
08 Май 2013, 9:02
Смерти моей хочешь? 
добавлено спустя 56 секунд:
 :mg: 
добавлено спустя 9 секунд:
 о рожи заработали 
добавлено спустя 3 секунды:
 :tf::tf::tf::tf: 
добавлено спустя 17 часов 36 минут:
 Спс вам профы спецы.
Видимо пизда форуму пизда пришла.
Олдфаги скажите, куда вы утопали все?
---------------
Akdmeh
08 Май 2013, 10:17
Заходил несколько раз.
Если бы ты убрал лишний код в первом посте - я бы посмотрел.
Мало того, что код не отформатирован, так еще и в разметке черт ногу сломит.
Поэтому особо разбираться желания нету. 
добавлено спустя 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 минут:
 Щас посижу с дебаггером, раз сам не можешь найти.
---------------
Istsam
08 Май 2013, 10:27
Akdmeh, не корректно, но уже почти то что нужно.
---------------
Akdmeh
08 Май 2013, 10:29
Короче, тебе нужно копать в сторону this и искать потом элемент, который надо отобразить через parent() или children()
Просто ты плохо отформатировал код, я иерархию меню не могу понять. Сделаешь нормально - может посмотрю еще. 
добавлено спустя 36 секунд:
 И вообще не совсем понимаю, чем тебе не угодило стандартное меню с Jquery UI
---------------
Istsam
08 Май 2013, 10:33
Akdmeh, я зарядился таким подходом, что если не понимаешь как это работает, нельзя использовать пока не поймешь как работает. 
добавлено спустя 40 секунд:
 Akdmeh, когда делаешь сервис который будет работать несколько лет, серьезно задумываешься о том, чтобы знать как это все будет работать.
---------------
Akdmeh
08 Май 2013, 10:41
Короче, даю тебе направление для поисков (для этого форумы и создаются, если хочешь готовое решение - тебе на фриланс).
При наводке на li ты вызываешь функцию:
function(event){ 
    $(event.target).addClass('active'); 
    //Дописать код здесь!
} 
В event.target будет находится li, на который ты навел указатель. Затем берем $(event.target), вызываем children или необходимый метод, чтобы найти то, что нужно показать (я не совсем понял, что именно тебе нужно, по ходу меню ul). Затем уже его показываешь fadeIn(300); 
добавлено спустя 3 минуты:
 И вообще, это называется писать велосипеды.
Ничто не мешает тебе вместо того, чтобы тратить время на меню, заняться чем-то более полезным, и разобраться в готовом работающем меню;)
---------------
Istsam
08 Май 2013, 10:44
Akdmeh, "мы не samsung, у apple не воруем".
Это так, смысл ты понял.
Свое хочется. 
добавлено спустя 1 минуту:
 некоторые решения, которые я находил, не совместимы с Ie.
Данный метод в IE работает на ура.
У нашей фирмы много клиентов ориентированных на IE, Opera
---------------