Dropdown Box исчезают при нажатии на кнопку

Это мое первое сообщение здесь, и я просто изучаю Jquery, поэтому, пожалуйста, будьте добрыми! :)Dropdown Box исчезают при нажатии на кнопку

Я только что создал веб-сайт - www.wayfairertravel.com и у меня есть несколько раскрывающихся коробки на моем сайте, где пользователи могут искать «By Style» и т.д ...

На данный момент, как только эти коробки открываются, вы должны закрыть их вручную ... Мне просто интересно, есть ли способ изменить текущий код там, так что когда пользователь щелкает в другом месте страницы, он исчезает.

Любая помощь очень ценится. Если бы вы могли быть точными в своем ответе, это было бы здорово - я должен изменить код и что изменить.

Cheers,

Гарри

источник

2013-09-11 user2768443

Изучение Jquery Показать функцию скрыть и как вызвать их при нажатии. – Rex

Можете ли вы показать, что вы пробовали? –

Два способа: - классический: обрабатывать событие клика для тела и закрывать выпадающее меню (выпадающее меню должно не распространяться на событие клика или не фильтровать его внутри обработчика тела); -better: сфокусировать внимание на раскрывающемся меню и скрыть его, когда фокус потерян (размытие) , Вам нужно в этом случае установить атрибут tabindex и для правила схемы настройки стиля для 0 –

Обычно вы добавлять события на body и желаемого выпадающего списка:

$(document.body).on('click', function() { 
    dropdown.close(); // .hide(); whatever 
}); 
dropdown.on('click', function(event) { 
    event.stopPropagation(); // prevents dropdown from getting closed when clicking on it 
});

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

источник

2013-09-11 11:25:06

Я принял совет Якуба Михалека и применил его код. Я подготовил скрипку, так что вы можете проверить это: http://jsfiddle.net/tmuuS/

Это ваш Javascript вы хотите иметь на странице:

$(document).ready(function() { 
    $("#expslider").hide(); 
    $("#expshower").show(); 
    $('#expshower').click(function() { 
     $("#expslider").slideToggle(); 
    }); 

    $(document.body).on('click', function() { 
     $("#expslider").slideUp(); 
    }); 
    $("#expslider").on('click', function (event) { 
     event.stopPropagation(); // prevents dropdown from getting closed when clicking on it 
    }); 
    $("#expshower").on('click', function (event) { 
     event.stopPropagation(); // prevents dropdown from getting closed when clicking on it 
    }); 
});

Хотя помните, что лучше иметь JavaScript в головной метке, а не прямо рядом с где вы его используете. (трудно найти его позже, когда вам понадобятся изменения)

источник

2013-09-11 11:36:15

Dropdown Box исчезают при нажатии на кнопку

ответ

Смежные вопросы