#jquery
#jquery
Вопрос:
В настоящее время я использую следующий скрипт jQuery: http://davidwalsh.name/twitter-dropdown-jquery — У меня возникла одна конкретная проблема. Следующий скрипт jQuery похож на скрипт входа в Twitter, он переключает div. Однако с помощью этого скрипта я не могу переключаться из div (либо щелчком из поля, либо текстом, который назначен для его открытия). Я прикрепил код, и я почти уверен, что конец кода касается этой проблемы, я просто не уверен, как его изменить, чтобы это не уничтожило скрипт. Я хочу, чтобы пользователи могли просто щелкнуть ссылку, которая открывает его, чтобы закрыть, когда они закончат. Если бы кто-нибудь мог помочь, это было бы здорово!
Кажется, я не могу опубликовать здесь весь скрипт jQuery, но я включил ссылку на то, где код доступен для просмотра.
Комментарии:
1. Код — это точно такой же код, который находится здесь: davidwalsh.name/twitter-dropdown-jquery — Я пытался опубликовать весь скрипт jQuery, но он мне не позволил.
2. Должна быть какая-то разница, если это работает там, но не работает у вас. 🙂 Можете ли вы попробовать настроить его на jsfiddle.net ?
3. Это работает, я просто хочу немного изменить код, чтобы, когда пользователь нажимает на текст, который переключает его, он отключал его (если открыт). Прямо сейчас, если вы нажмете за пределами области, это отключит ее, а я не совсем такой. — Вот ссылка на jsfiddle.net: jsfiddle.net/Hzq4E
4. Извините, я неправильно прочитал ваш пост, я думал, что это работает не так, как ожидалось.
5. Все в порядке! Если бы кто-нибудь с большим опытом, чем я, мог, возможно, модифицировать этот скрипт jQuery, чтобы он делал то, что я ищу, это было бы потрясающе!
Ответ №1:
Поиграв некоторое время в JsFiddle, я придумал некоторый код, который делает то, что вы хотите, я постарался изменить как можно меньше существующего кода.
$(document).ready(function() {
/* for keeping track of what's "open" */
var activeClass = 'dropdown-active',
focusFired = false,
showingDropdown, showingMenu, showingParent;
/* hides the current menu */
var hideMenu = function() {
if (showingDropdown) {
showingDropdown.removeClass(activeClass);
showingDropdown = null;
showingMenu.hide();
}
};
/* recurse through dropdown menus */
$('.dropdown').each(function() { /* track elements: menu, parent */
var dropdown = $(this);
var menu = dropdown.next('div.dropdown-menu'),
parent = dropdown.parent(); /* function that shows THIS menu */
var showMenu = function() {
hideMenu();
showingDropdown = dropdown.addClass('dropdown-active');
showingMenu = menu.show();
showingParent = parent;
};
/* function to toggle menu when clicked */
dropdown.bind('click', function(e) {
console.log('Click fired');
if (e) e.stopPropagation();
if (e) e.preventDefault();
if(showingDropdown == dropdown amp;amp; !focusFired) {
hideMenu();
} else {
showMenu();
}
focusFired = false;
});
/* function to show menu when someone tabs to the box */
dropdown.bind('focus', function() {
focusFired = true;
showMenu();
});
});
/* hide when clicked outside */
$(document.body).bind('click', function(e) {
if (showingParent) {
var parentElement = showingParent[0];
if (!$.contains(parentElement, e.target) || !parentElement == e.target) {
hideMenu();
}
}
});
});
Есть некоторые вещи, которые поначалу неочевидны, когда вы нажимаете на элемент, срабатывает событие фокусировки и событие щелчка, поскольку фокус показывает меню, вы не можете просто проверить состояние там, потому что оно покажет и быстро скроет меню. Вот почему я добавил флаг focusFired, который событие click проверяет перед скрытием.
Ответ №2:
Вы можете изменить лишь крошечный фрагмент кода:
/* function to show menu when clicked */
dropdown.bind('click',function(e) {
if(e) e.stopPropagation();
if(e) e.preventDefault();
if(menu.is(':visible'){
hideMenu();
} else {
showMenu();
}
});
Дайте мне знать, если это сработает, поскольку это полностью непроверено.
Редактировать: Ознакомьтесь с ответом @ihumanable, он позаботился о том, чтобы действительно протестировать код, прежде чем запрашивать какие-либо отзывы. 🙂