Преобразование меню наведения курсора CSS в меню jQuery

#jquery #css #drop-down-menu

#jquery #css #выпадающее меню

Вопрос:

Я нашел сообщение в блоге о создании меню, найденного в gmail, с выпадающим списком css.

Выпадающий список отображается при наведении курсора мыши на кнопки, но я хочу преобразовать это в меню jQuery

где выпадающий список отображается, когда мы нажимаем на кнопку, а не при наведении курсора мыши, пожалуйста, помогите.

Заранее спасибо .

1. Добро пожаловать в SO. Мы будем рады помочь, если вы столкнетесь с конкретными проблемами при написании кода, но мы не будем (в большинстве случаев) писать его за вас.

2. Я хочу знать, как конвертировать? так что, вероятно, пример кода может помочь, поскольку я не так хорош в jQuery

3. jquery.com он полон полезных примеров.

4. Спасибо, сэр, если вы не можете помочь, пожалуйста, не делайте этого.

5. Они помогают. Мне было достаточно скучно, чтобы написать четыре строки кода, но это должно быть вашей работой. Если вы не понимаете jQuery, изучите его. Это не так сложно.

Ответ №1:

Это действительно простая логика. Я заменил несколько :hover правил CSS .clicked классом и добавил этот JS:

 $('.menu > ul > li').click(function() {
    $(this).siblings().removeClass('clicked');
    $(this).toggleClass('clicked');
});

Вместо того, чтобы разрешить браузеру вызывать выпадающий список с :hover псевдоклассом, у меня есть jQuery, переключающий класс .clicked при каждом li нажатии на верхнем уровне. Это приводит к тому же поведению, но с JS.

Эта строка:

 $(this).siblings().removeClass('clicked');

По сути, удаляет clicked класс из родственных элементов этого элемента, что позволяет пользователю выпадать только из одного меню за раз (в противном случае происходит перекрытие).

Демонстрация: http://jsfiddle.net/PSUkW/5 /

1. Вы удалили свой комментарий, но вот обновленный код: jsfiddle.net/PSUkW/16 .

2. Большое спасибо за вашу помощь. (удален комментарий к вашему совету, что это моя работа, чтобы сделать это)

3. Никаких проблем. jQuery нетрудно освоить. Как только вы это сделаете, с ним будет легко работать.

Ответ №2:

Довольно просто. Внутри CSS, добавляющего стили и отображающего выпадающий список li:hover, вы можете обновить его, чтобы добавить класс: что-то вроде .menu ul li.click ul . А затем 2 строки jQuery для назначения этого действия щелчка.

Смотрите код здесь: http://jsfiddle.net/PSUkW/3 /

1. @Shobha V — Смотрите эту ссылку: jsfiddle.net/PSUkW/9 Я обновил код, чтобы удалить все экземпляры click класса, затем на конкретном ЛИ, который был нажат, добавьте click класс, чтобы включить выпадающий список, если он есть.