У меня есть выпадающее меню внутри DIV.Как размыть элемент div?
Я хочу, чтобы выпадающее меню было спрятано, когда пользователь нажимал в другом месте.
$('div').blur(function() { $(this).hide(); }
не работает.
Я знаю .blur работает только с <a>, но в этом случае самое простенькое решение?
Я думаю, проблема заключается в том, что divs не запускают событие onfocusout. Вам нужно будет захватить события кликов на теле, а затем выработать, если целью было тогда меню div. Если это не так, тогда пользователь нажал в другом месте, и div должен быть скрыт.
<head>
<script>
$(document).ready(function(){
$("body").click(function(e) {
if(e.target.id !== 'menu'){
$("#menu").hide();
}
});
});
</script>
<style>#menu { display: none; }</style>
</head>
<body>
<div id="menu_button" onclick="$('#menu').show();">Menu....</div>
<div id="menu"> <!-- Menu options here --> </div>
<p>Other stuff</p>
</body>
Я не думаю, что это отвечает на вопрос. Я понимаю, что aamir хочет скрыть div, когда вы нажимаете внутри, если вы не нажмете элемент select. – ScottE
Это неправильно. Что происходит, когда пользователь нажимает на другой div, который не является частью меню? – rahul
Div может принять фокус и проблему onfocus и onblur, если вы укажете для него tabindex. Попробуйте следующее: '
.click будет работать только отлично внутри тега div. Просто убедитесь, что вы не на вершине элемента select.
$('div').click(function(e) {
var $target = $(e.target);
if (!$target.is("select")) { $(this).hide() };
});
$("body").click(function (evt) {
var target = evt.target;
if(target.id !== 'menuContainer'){
$(".menu").hide();
}
});
дают Див идентификатор, например "menuContainer". то вы можете проверить target.id вместо target.tagName, чтобы убедиться, что это конкретный div.
Попробуйте использовать TabIndex атрибут на вашем DIV см:
Проверить this почту для получения дополнительной информации и демо.
Это не работает на iOS Safari. – Rell
Для этого нужно работать с div сначала необходимо сфокусироваться. Поэтому убедитесь, что он сфокусирован, прежде чем пытаться щелкнуть наружный div, чтобы увидеть аффект – Bren
OMG ... GENIUS !! Большое спасибо ... здесь я пытался найти способ сделать собственный обработчик событий ... :) – carinlynchin
Не самый чистый способ, но вместо захвата каждого события клика на странице вы можете добавить пустую ссылку на свой div и использовать ее как «фокус-прокси» для div.
Так разметка изменится:
<div><a id="focus_proxy" href="#"></a></div>
и ваш код Javascript должен подключить к событию размытия по ссылке:
$('div > #focus_proxy').blur(function() { $('div').hide() })
Не забудьте установить фокус на ссылку когда вы показываете div:
$('div > #focus_proxy').focus()
Я только столкнулся с этой проблемой. Я думаю, что ни одно из вышеперечисленных вопросов не может исправить проблему, поэтому я размещаю свой ответ здесь. Это сочетание некоторых из вышеуказанных ответов: по крайней мере, фиксированные 2 проблемы, которые можно было бы удовлетворены, просто проверить, если выбранная точка такая же «идентификатор»
$("body").click(function(e) {
var x = e.target;
//check if the clicked point is the trigger
if($(x).attr("class") == "floatLink"){
$(".menu").show();
}
//check if the clicked point is the children of the div you want to show
else if($(x).closest(".menu").length <= 0){
$(".menu").hide();
}
});
Кажется, вам нужно обработать OnClick событие на теле и проверьте, нажат ли он на div. Если нет - скройте этот div. –