Как заставить выпадающее меню открываться/замыкаться щелчок, а не парение?
Я очень плохо знаком с JavaScript и ajax/jquery и работал над попыткой заставить сценарий открывать и закрывать меню отбрасывания по щелчку скорее то парение.
Рассматриваемое меню найдено на http://www.gamefriction.com/Coded/ и является темным меню на правой стороне под заголовком. Я хотел бы, чтобы это открылось и закрылось как другое меню, которое является далее ниже его (это светло-серо и находится в "Избранном Подразделении" модуль).
Серое меню является частью меню, и меню языка не.
У меня есть импорт jQuery также, который может быть найден в источнике представления вышеупомянутой ссылки.
Мой код JavaScript:
Мой CSS:
#lang-selector
{
font-size: 11px;
height: 21px;
margin: 7px auto 17px auto;
width: 186px;
}
#lang-selector span
{
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a
{
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a
{
width: 186px;
}
#lang-selector ul ul
{
display: none;
position: absolute;
}
#lang-selector ul ul li
{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a
{
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 10px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a
{
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover
{
background: #c4262c;
color: #fff;
}
Мой HTML:
Спасибо!
4 ответа
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
Использование toggle потребует от вас щелчка, чтобы открыть, затем повторного щелчка, чтобы закрыть
.hover, .click, .something - все это триггеры, просмотрите эту ссылку:
чтобы узнать больше о событиях в Jquery!
Ps: sushil bharwani (проголосуйте за него), прав, просто замените .hover на .click
Я бы сделал что-то вроде этого ...
$(function() {
$("#lang-selector > li").click(function() {
$('ul:first',this).toggleClass('active');
});
});
А затем в CSS добавьте следующее:
.active { display: block; }
<< EDIT: удалено "ul" из класса ".active" для повышения эффективности рендеринга CSS >>
Также убедитесь, что в суб-навигаторе
- есть "display: none;" по умолчанию в вашем CSS.
- в # lang-selector, но не в каких-либо тегах
- sub-nav, будет либо открывать, либо закрывать вспомогательную навигацию, в зависимости от ее текущего состояния.
Если вас беспокоит доступность "display: none" во вспомогательной навигации по умолчанию, вы можете сделать что-то вроде этого ...
$(function() { $("#lang-selector li ul").addClass("hidden"); $("#lang-selector li").click(function(e) { e.preventDefault(); $('ul:first',$(this)).toggleClass('hidden active'); }); });<< EDIT: Изменены селекторы, чтобы соответствовать приведенному примеру, повернуто "this" в объект jQuery. >>
А затем также добавьте это в CSS
.hidden { display: none; }В этом сценарии по умолчанию отображается
- , а затем, когда документ загружается, jQuery добавляет «скрытый» класс ко всем из них, чтобы скрыть их. , затем по щелчку
- он переключит скрытые и активные классы, отобразит или скроет их.
Вам также необходимо удалить текущий "display: none" из ul ul ul # lang-selector, иначе он будет иметь приоритет над скрытыми / активными классами.
- он переключит скрытые и активные классы, отобразит или скроет их.
Это сделает так, что щелчок по тегу
найдите этот $("#lang-selector li").hover и замените на
$("#lang-selector li").click