Навигационное меню onClick/hover

Question

У меня есть меню навигации с 8 ссылками, 3 из которых имеют подменю. Когда я нависаю над ссылками, цвет меняется с серого на золото. Когда я наводил курсор на ссылки с подменю, он отображает подменю.

Я создал событие onClick через jQuery для ссылок с подменю, чтобы при щелчке на нем отобразилось подменю и оставлено на экране и изменилось цвет ссылки на золото (цвет наведения).

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

home rules bonusrolls attendance reserves addons gallery info 

Из вышеперечисленного, бонусы, посещаемость и аддоны имеют подменю.

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

#nav_whatever = sub menus 
#whatever_menu = link 

JQuery

$("a#bonusrolls_menu").click(function() { 
    event.preventDefault(); 
    $('#nav_bonusrolls').css('display', 'block'); 
    $('#nav_attendance').css('display', 'none'); 
    $('#nav_addons').css('display', 'none'); 
    $("a#bonusrolls_menu").css('color','#e97e1b'); 
    $("a#attendance_menu").css('color','#CCC'); 
    $("a#addons_menu").css('color','#CCC'); 
}); 

CSS (SCSS)

#main_nav { 
    margin: 0; 
    padding: 0; 
    font-size: 1.5em; 
    word-spacing: 10px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    width: 100%; 

    li { 
     float: left; 
     padding: 0 0 0 15px; 

     &.nav_dropdown:hover { 
      #nav_bonusrolls, #nav_attendance, #nav_addons { 
       display: inline; 
      } 
     } 

     ul { 
      &#nav_bonusrolls, &#nav_attendance, &#nav_addons { 
       display: none; 
       position: absolute; 
       margin: 0; 
       padding: 10px 0 0 0; 
       font-size: .7em; 
       word-spacing: 1px; 

       li { 
        margin-left: 10px; 
        display: inline; 
       } 
      } 

      &#nav_bonusrolls { 
       margin: 0 0 0 -18px; 
      } 

      &#nav_attendance { 
       margin: 0 0 0 -125px; 
      } 

      &#nav_addons { 
       margin: 0 0 0 -333px; 
      } 
     } 
    } 

    a:link, a:visited, a:active { 
     color: #CCC; 
    } 

    a:hover { 
     color: #e97e1b; 
    } 
} 

Edit: http://oi39.tinypic.com/30sjz14.jpg

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

Fiddle Полноэкранный http://jsfiddle.net/SLNuJ/1/embedded/result/ с кодом http://jsfiddle.net/SLNuJ/1

Answer 1

Проблема в том, что вы добавляете color: #CCC к элементам инлайн как часть обработчика щелчка. Поскольку они встроены, они переопределяют все, что указано в файлах CSS. Поскольку вы меняете цвет при наведении курсора на файлы CSS, они не отображаются.

Я исправил проблему в этой скрипке: http://jsfiddle.net/SLNuJ/2/

Единственное изменение в код JS:

$(document).ready(function() { 
    $("a#bonusrolls_menu").click(function (event) { 
     event.preventDefault(); 
     $('#nav_bonusrolls').css('display', 'block'); 
     $('#nav_attendance').css('display', 'none'); 
     $('#nav_addons').css('display', 'none'); 
     $("a#bonusrolls_menu").css('color', '#e97e1b'); 
     $("a#attendance_menu").css('color', ''); 
     $("a#addons_menu").css('color', ''); 
    }); 

    $("a#attendance_menu").click(function (event) { 
     event.preventDefault(); 
     $('#nav_attendance').css('display', 'block'); 
     $('#nav_bonusrolls').css('display', 'none'); 
     $('#nav_addons').css('display', 'none'); 
     $("a#attendance_menu").css('color', '#e97e1b'); 
     $("a#bonusrolls_menu").css('color', ''); 
     $("a#addons_menu").css('color', ''); 
    }); 

    $("a#addons_menu").click(function (event) { 
     event.preventDefault(); 
     $('#nav_addons').css('display', 'block'); 
     $('#nav_bonusrolls').css('display', 'none'); 
     $('#nav_attendance').css('display', 'none'); 
     $("a#addons_menu").css('color', '#e97e1b'); 
     $("a#bonusrolls_menu").css('color', ''); 
     $("a#attendance_menu").css('color', ''); 
    }); 
}); 

В месте установки цвета, чтобы быть #CCC, просто удалить цвет из стильный стиль элемента.

P.S .: Используйте кнопку «Tidy Up», предоставляемую JSFiddle. Это действительно делает ваш код хорошим.