2013-11-19 1 views
2

Я сделал простой jsfiddle, чтобы показать проблему:
http://jsfiddle.net/jacqueline01/rCW85/Auto близко меню, щелкнув в любом месте только в конкретном браузере ширина

Пожалуйста, измените размер вашего браузера, чтобы увидеть меню выпадающий/тумблер. Эта упрощенная скрипка создана от this tutorial.

Проблема
Когда выпадающее меню/переключения виден, я хочу его автоматического закрытия всякий раз, когда я нажимаю ссылку или когда я нажимаю вне меню. Это должно произойти только тогда, когда ширина браузера меньше 500 пикселей. (См скрипку)

Я попытался добавить следующее:

$("html").click(function() { 
    // Code to slideUp the .menu-items 
}); 

Однако эта функция - конечно - также работает, когда ширина браузера более 500px. Я не могу заставить его работать в коде < 500px JS.

Итак, я ищу способ сдвинуть меню в меню после того, как мобильное меню видно, щелкнув в любом месте HTML.

Любая помощь приветствуется. Заранее спасибо!

+0

Что-то вроде этого http://jsfiddle.net/rCW85/7/ :) Я уверен, он может быть улучшен, но дать ему пойти –

+0

Спасибо Aamir! Это почти решение! Однако после того, как я закрыл меню и изменил размер браузера на 500+ px, элементы меню больше не видны. Еще раз спасибо! –

+0

Попробуйте http://jsfiddle.net/rCW85/8/, хотя я бы рекомендовал найти способ использования CSS, поскольку мне не нравится window.resize. –

ответ

0

Попробуйте простое меню css, которое лучше, чем jsfiddle.net/rCW85/10 (проверьте раздел css в разделе внешних ресурсов. Демо на micjamking.github.io/Navigataur Вам просто нужно изменить ширину в медиа-запросе на 500

Если вы хотите, чтобы закрыть меню, когда пользователь нажмет на улице, попробуйте этот jsfiddle.net/aamir/rCW85/11

+0

Я только что обнаружил что-то странное: 1. Откройте меню (переключить), когда браузер меньше 500 пикселей 2. Не закрывайте его. 3. Измените размер браузера, чтобы увидеть меню рабочего стола. 4. Нажмите ссылку 5. Навигация исчезает , После изменения размера браузера снова появляется навигатор. Я не думаю, что кто-то будет делать эти действия в этом порядке, но, может быть, вы - или кто-либо еще - знаете (-ы) решение этой проблемы? Заранее спасибо! –

+0

Редактировать: 4. Нажмите ссылку или где-нибудь в документе, и навигатор исчезнет. –

+0

Попробуйте простое меню css, которое лучше подходит http://jsfiddle.net/rCW85/10/ (проверьте раздел css во внешних ресурсах. Демо на http://micjamking.github.io/Navigataur/ Вам просто нужно изменить ширина в медиа-запросе до 500 –