Я изменил следующий код и заменил.hover с.click. Все работает отлично, за исключением отсутствия функции "offclick". С.hover это не проблема. Как добавить к этому аккаунту щелчок с элемента. ul видимость должна быть "скрыта" при нажатии, снаружи и т.д.
$(document).ready(function(){
if($("ul.dropdown").length) {
$("ul.dropdown li").dropdown();
}
});
$.fn.dropdown = function() {
return this.each(function() {
$(this).click(function(){
$(this).addClass("click");
$('> .dir',this).addClass("open");
$('ul:first',this).css('visibility', 'visible');
},function(){
$(this).removeClass("click");
$('.open',this).removeClass("open");
$('ul:first',this).css('visibility', 'hidden');
});
});
}
Событие hover
самом деле состоит из двух состояний, другими словами, для события hover
для сцены используются два разных события, и они являются mouseenter
и mouseleave
поэтому, когда вы mouseleave
курсор мыши на элемент, событие mouseenter
становится запущенным и mouseenter
от элемента mouseleave
события увольняет, так что в этом случае, вы не можете преобразовать это событие, чтобы click
, используя два метода, как hover
вместо этого, вы просто объявить один click
обработчик событий (функцию), для этого элемента. Например, вы можете сделать что-то вроде этого:
$('#element').on('click', function(e){
//...
});
Если вы хотите изменить состояние элемента при щелчке по другому элементу, вы должны поймать событие click для этого элемента, так что нажав на другой элемент, вы можете сделать что-то противоположное. Например, вы можете зарегистрировать событие click на $('body')
поэтому, когда клик происходит на body
вы можете сделать что-то противоположное.
Вы можете использовать jQuery .toggle()
для этого.
$(SELECTOR).toggle(function () {
// State 1
}, function () {
// State 2
});
Таким образом, как вы можете проверить, что пользователь нажал снаружи
$(document).click(function () {
//hide ul there
});
$(this).click(function(event){
event.stopPropagation(); // this forbid parent clicks (on document)
$(this).addClass("click");
$('> .dir',this).addClass("open");
$('ul:first',this).css('visibility', 'visible');
});