Блог

Я заметил проблему с моим меню аккордеона jquery.

Когда я открываю раздел и закрываю его снова, функциональность ‘: hover’, похоже, перестает работать для этого конкретного раздела. Функция ‘:hover’ все еще работает в других разделах, которые я еще не щелкнул.

Если я щелкну их все, то ‘:hover’ перестанет работать для всех разделов.

Я был бы невероятно признателен за некоторую помощь.

Большое спасибо

Роберт

Вот ссылка jsFiddle на краткий пример кода, демонстрирующий проблему.

http://jsfiddle.net/yUyEC/

наведите курсор на разделы, чтобы увидеть, что позиции фона сдвинуты. Щелкните один раздел, затем щелкните другой и наведите курсор на предыдущий раздел. Происходит что-то странное 🙂

В этом примере, пожалуйста, обратите внимание, что расположение слайдов div отключено, в основной версии это нормально, хотя проблема хорошо продемонстрирована.

Во-первых, я бы сделал код допустимым, например

 <div class="sidebar_game_header">
  <a href="http://www.apple.com/">
   <img src="http://robertmegone.com/jsfiddle/images/icn_1.png" alt="Game 4 Icon"/>
   <div class="sidebar_game_header_text">Game 4</div>
  </a>
</div>
  

Вы не можете вложить уровень блока div в элемент встроенного уровня a , это приведет к тому, что браузеры попытаются восстановить DOM и отобразить элементы так, как вы хотите, обычно это нормально, но как только вы добавите интерактивность с помощью JS функций, код / отображение, скорее всего, сломается .. не говорю, что это здесь, но это, скорее всего, не поможет 😉

тогда я бы сказал, что в этом меню вообще не требуется позиционирование или перемещение, должно быть достаточно просто поместить изображение и текст в «заголовок», используя встроенные блоки. Тогда у них не должно быть необходимости перемещаться (необычное поведение, которое происходит только сейчас)

Я не уверен точно, что вы пытаетесь сделать, но CSS может выполнять большую часть работы за вас, так что jQuery просто должен скользить вверх и вниз по дочерним меню и не иметь ничего общего с наведениями, которые будут работать через CSS, как в обычном меню.. но в любом случае .. вот некоторый исправленный HTML / CSS-код, который вроде как работает с вашим jQuery

JSFiddle: ЗДЕСЬ

обратите внимание, что IE7 выдает ошибку, я не знаю почему, но я думаю, что основы есть, я изменил вложенное значение div на span и выровнял его и изображение по вертикали с помощью встроенного блока, остальное не нужно было перемещать или позиционировать, поскольку это естественные позиции

если вы хотите, чтобы ссылки были белыми, вам нужно a также указать в CSS color в div, недостаточно указать цвет ссылки..

думаю, на этом пока все

Хорошо, я еще немного поиграл, я не совсем понимаю код, который вы использовали, но я просто почувствовал, что мне нужно извлечь CSS из jQuery, чтобы ваши состояния наведения активировались

Я создал обновленный пример, который кто-то, скорее всего, мог бы оптимизировать, это делает все, что я думаю; состояния наведения, перемещение фона и т.д. С помощью CSS, И единственное, что он делает, это добавляет класс в заголовок «open» accordion, чтобы он сохранял тот же CSS, что и состояние зависания

Последнее, в чем я не уверен, это в какой из этих ссылок вам нужно было бы предотвратить поведение по умолчанию (ссылки на заголовок?) — Я просто отключился и вообще не делал <span> текст ссылкой 😉

Я также изменил внутренний список на список 😉 это работает так же

(кстати, IE7 больше не выдает исключение с этим кодом)

Новый пример: здесь