Используйте jQuery, чтобы скрыть DIV, когда пользователь нажимает за его пределами
Обычно вы делаете что-то вроде этого:
Html.ActionLink("My Link", "MyAction", null, new { @class = "my-class" })
И затем используйте CSS для стиля my-class:
a.my-class { color: #333333 }
a.my-class:active { color: #666666 }
a.my-class:link { color: #999999 }
a.my-class:visited { color: #CCCCCC }
4 ответа
Я работал по полю поиска, которое показывает автоматическое заполнение согласно обработанным ключевым словам. Когда я не захочу нажимать по любой опции тогда, я буду использовать ниже кода для сокрытия обработанного списка, и это работает.
$(document).click(function() {
$('#suggestion-box').html("");
});
Ящик для предложений является моим контейнером автоматического заполнения, где я показываю значения.
-
1Дополнительный протест: имя панели инструментов отображено ' ver' может отличаться от названия панели инструментов, когда передано как аргумент ' ver' который также может отличаться от имени функции лицензии: например, ' Оптимизация Toolbox'/' optim'/' optimization_toolbox' – Christopher Barber 14 June 2013 в 19:51
Вы можете проверить цель события щелчка, которое запускается для тела, вместо того, чтобы полагаться на stopPropagation.
Примерно так:
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
Кроме того, элемент body может не включать все визуальное пространство, отображаемое в браузере. Если вы заметили, что ваши клики не регистрируются, возможно, вам придется вместо этого добавить обработчик кликов для элемента HTML.
Вам лучше использовать что-то вроде этого:
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
$(document).click(function(event) {
if ( !$(event.target).hasClass('form_wrapper')) {
$(".form_wrapper").hide();
}
});