Изменение класса jQuery не обновляется до наведения мыши - PullRequest
Новая
       59

Изменение класса jQuery не обновляется до наведения мыши

3 голосов
/ 13 октября 2010

У меня есть меню, и каждый пункт меню является диапазоном с классом, установленным в css:

.newClass {color: red}

.oldClass {color:black} oldClass:hover {color:blue;}

Когда вы нажимаете на элемент меню, класс изменяется с: $(this).removeClass('oldClass').addClass('newClass'); который отлично работает

Когда щелкает другой элемент меню, я изменяю классы в текущем пункте меню с помощью: $(this).removeClass('newClass').addClass('oldClass');

Проблема в том, что когда класс снова изменяется, изменение не отражается, пока я не наведу курсор мыши на пункт меню. Таким образом, цвет пункта меню остается красным, пока я не наведу на него курсор, а затем он снова станет черным с голубым наведением.

См. Пример Габи в комментариях о том, что должно происходить

Вот мой фактический код:

$('.headingRev').removeClass('headingRev').addClass('heading');<br> $(this).removeClass('heading').addClass('headingRev');

и вот css:

.heading {color: #bb1f1a;}<br> .heading:hover {color: #e9b49e;text-decoration:none;}<br> .headingRev {color: #e9b49e;}

Ответы [ 2 ]

1 голос
/ 13 октября 2010

Возможная проблема может заключаться в том, как вы удаляете выделение из текущего элемента меню.

вам не следует использовать this, если вы делаете это изнутри, потому что this будет указыватьэлементу, по которому щелкнули, а не текущему ранее .. если это так, то вы должны использовать $('.newClass').removeClass('newClass').addClass('oldClass');

см. некоторый код, который работает с http://www.jsfiddle.net/khGRW/

Обновление

Теперь я вижу ... вы используете Cufon, который заменяет текст изображениями или элементами canvas ..

Это делает его невосприимчивым к обычным изменениям DOM.

Вам нужно вызвать Cufon.refresh('#content') после изменения класса на элемент (, который в данный момент не относится к hover событие ), чтобы заставить его перерисовать меню в соответствии с текущим состоянием DOM.

Эффект hover обрабатывается автоматически, потому что они поддерживают эту опцию, но на этом контроль DOM заканчивается со стороны Cufon.

0 голосов
/ 14 октября 2010

попробуйте этот подход: 

<ul>
<li class="ordinary">Menu 1</li>
<li class="ordinary">Menu 2</li>
<li class="ordinary">Menu 3</li>
</ul>

$('ul li').click(function(){
  $('ul li').removeClass("highlight").addClass("ordinary");
  $(this).removeClass("ordinary").addClass("highlight");
});
  1. при нажатии на элемент меню, сделайте все элементы меню обычным классом
  2. сделайте выбранное меню для класса выделения
...