Как закрыть отзывчивое меню начальной загрузки, когда пользователь касается любой части поверхности экрана, кроме меню?

Я использую Bootstrap framework v2.0.1 для дизайна своего сайта. Когда веб-сайт просматривается на таких устройствах, как iPad, iPhone, планшеты, смартфоны и т. д. (не на компьютерах, настольных компьютерах и ноутбуках), пункты меню сворачиваются в один значок и помещаются в верхний правый угол экрана. Если пользователь нажимает на этот значок, меню расширяется, при желании пользователь может выбрать нужный пункт меню, открывается страница, связанная с этим пунктом меню, и расширенное меню закрывается. Это текущая функциональность моего веб-сайта, и она работает абсолютно нормально.

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

Как мне этого добиться? Если вам нужна дополнительная информация с моей стороны по этому вопросу, пожалуйста, дайте мне знать.

Спасибо.


menu jquery css responsive-design twitter-bootstrap-2
person PHPLover    schedule 14.10.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуйте использовать этот код: Изменить: если в вашем меню есть класс .nav-collapse, вы можете использовать это:

$("body").click(function(e){ // When we click in body (all clicks are in the body ) we detect what element we are clicking.
    if ($(e.target).hasClass(".nav-collapse")){ //if the element is not our menu (#menu), we use closemenu function (we close our menu)
        closemenu();
    };
});

function closemenu(){
 // close your menu
 $('.nav-collapse').collapse('hide');
}
person Héctor    schedule 14.10.2014
comment
Спасибо за Ваш ответ. Но мне нужен ответ с точки зрения Bootstrap. Можете ли вы помочь мне в этом отношении? - person PHPLover; 14.10.2014
comment
Этот код — jQuery, и вам нужен jQuery для использования Bootstrap. В чем проблема? - person Héctor; 14.10.2014
comment
на самом деле есть много div с контейнером класса, и код для сворачивания меню $('.nav-collapse').collapse('hide'); Теперь моя проблема заключается в том, как мне написать это в jQuery, что, если пользователь касается любого из этих div с контейнером класса, открытое меню должно закрыться (вышеприведенный скрипт должен быть вызван). Где и как я должен написать этот код? - person PHPLover; 14.10.2014
comment
@PHPLover Bootstrap — это просто некоторые CSS и jQuery, которые вы можете использовать и расширять, вы бы добавили эту функцию, поскольку она не является частью Bootstrap 2 или 3. - person Christina; 14.10.2014
comment
Вы бы использовали то же самое и поместили бы туда свой идентификатор или класс - person Christina; 14.10.2014
comment
@Christina: Если бы вы могли опубликовать код в качестве своего ответа, это было бы лучше для меня, а также для других новичков, столкнувшихся с этой проблемой. Не могли бы вы пожалуйста? - person PHPLover; 14.10.2014
comment
@PHPLover Проверьте этот ответ сейчас. Я отредактировал его, предполагая, что в вашем меню есть класс .nav-collapse. - person Héctor; 14.10.2014
comment
@Héctor: Последний вопрос к вам: нужно ли мне писать что-либо из приведенного выше кода внутри $(document).ready(function(){});? - person PHPLover; 14.10.2014
comment
@Héctor: я не хочу вызывать функцию по щелчку тела. Я хочу вызвать функцию для всех div с классом cntainer. Нужно ли мне писать что-либо из приведенного выше кода внутри $(document).ready(function(){});? - person PHPLover; 14.10.2014
comment
Итак, попробуйте следующее: $(".container").click(function(e){ // When we click in body (all clicks are in the body ) we detect what element we are clicking. if ($(e.target).hasClass(".nav-collapse")){ //if the element is not our menu (#menu), we use closemenu function (we close our menu) closemenu(); }; }); function closemenu(){ // close your menu $('.nav-collapse').collapse('hide'); } поместите его внутрь $(document).ready(function(){}); - person Héctor; 14.10.2014

arrow_upward
1
arrow_downward

Почему бы вам не попробовать прослушиватель событий jQuery .focusout в меню? http://api.jquery.com/focusout/

person myfashionhub    schedule 14.10.2014