Выпадающее меню JS не закрывается?

0

Поэтому я нашел эту скрипку здесь: http://jsfiddle.net/8qPvp/4/ Я думал, что буду использовать ее только для личных целей. Я действительно новичок в JS, и я заметил, что открытый родитель не возвращается по клику, как он открывается. Как это можно исправить?

$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').hide();
        $(this).children("ul").toggle();
    });
});
  • 0
    Может быть, это? только немного измени стиль: P jsfiddle.net/MatthewDavis/4syjv
  • 1
    Почти идеально, но я не могу закрыть меню: / Не могли бы вы сделать так, как когда вы щелкаете в другом месте, оно закрывается?
Показать ещё 4 комментария
Теги:
menu

2 ответа

1
Лучший ответ

Как насчет этого:

$("li").click(function () {
    $('li > ul').hide();
    $(this).children("ul").toggle();
});

$(document).click(function()
{
    $('li > ul:visible').hide();
})

$('.menu li').click(function(e)
{
    e.stopPropagation();          
})

Поэтому по умолчанию я делаю всякий раз, когда в документе щелкнуто ANYWHERE, ваше видимое меню будет скрыто. Однако вы не хотите, чтобы это произошло, когда вы открываете новое меню (было бы, сделано видимым и скрытым непосредственно). Поэтому я делаю исключение, которое улавливает, когда вы хотите открыть новое меню, и я отменим событие щелчка документа.
Я использую event.stopPropagation() для отмены события.

jsFiddle

Поделиться
  • 0
    Спасибо, это работает! Но теперь, как я могу добавить переход CSS? При наведении я бы просто сделал #div {height: 10px; переход: высота 1 с;} #div: hover {высота: 100px;} верно? Или нет? Ну, во всяком случае, я понятия не имею, как добавить CSS в JavaScript: /
  • 0
    Ну, это совсем другая тема. Трудно использовать этот jquery и css вместе, потому что в css нет функции onClick. Вы должны добавить новый класс, когда список меню виден. Но я думаю, что это будет слишком много «из коробки», я бы предложил сначала попробовать что-то простое.
Показать ещё 7 комментариев
1 
$(document).ready(function () {
    $("li").click(function () {
        $('li > ul').hide();
        $(this).children("ul").toggle();
    }).mouseleave(function(){
        $(this).children("ul").hide();
    });
});

Проверьте эту скрипку http://jsfiddle.net/Aveendra/8qPvp/18/

Поделиться
  • 1
    Mouseleave делает меню запутанным ..
  • 0
    Теперь он работает произвольно при наведении и оставляет меню открытым при переходе к следующему.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню