Я использую функцию JQueryJquery Show Hide Функция
function ShowHide(){
$(".login").animate({"height": "toggle"}, { duration: 1000 });
}
и ссылку, чтобы показать, скрыть .login ДИВ является:
onclick="ShowHide(); return false;"
Но эта связь только переключает DIV, чтобы показать и скрыть , но я хочу, чтобы он также скрывался, когда пользователь нажимает на div, у меня есть обертка страниц на месте, но мне просто нужна помощь с jQuery.
вам нужно поместить событие на элемент body, чтобы скрыть его, если вы хотите, чтобы пользователь нажал в другом месте, чтобы скрыть его.
ps: пожалуйста, не используйте onclick в элементах html! - менеджер использования событий в JQuery для этого (., Например, STH в линиях addevent (нажмите, функция))
<html>
<head>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<style>
.login-div { width: 100px; height: 100px; margin:auto; border: solid 1px black; position: relative; background-color: #aeaeae; display:none;}
.parent-div { width: 300px; height: 300px; margin:auto; border: solid 1px #aeaeae; position: relative;}
.footer { margin-bottom: 0px; margin-top:auto; margin-left:auto; margin-right:auto; height:40px; width:200px; position:relative; display:none;}
</style>
<script>
$(window).load(function(){
var DEBUG = 0;
var count = 0;
$('.parent-div').bind('click', function(e){
e.preventDefault();
e.stopPropagation();
DEBUG==1?console.log('Target: '+$(e.target).attr('class')):'';
DEBUG==1?console.log('Show Hide: '+(count++)):'';
//ShowHide();
var target_class = $(e.target).attr('class');
if(target_class == 'link'){
$(".login-div").animate({"height": "toggle"}, { duration: 1000 });
$('.footer').toggle();
}
else{
$(".login-div").animate({"height": "hide"}, { duration: 1000 });
$('.footer').hide();
}
});
});
</script>
</head>
<body>
<div class="parent-div">Parent Box:<br/>
<a href="#" class="link">ShowHide</a>
<div class="login-div">Child Box:</div>
<div class="footer">click out side the gray box & inside the Parent-box
</div>
</body>
</html>
я соорудил выше основан на моем понимании вашего требования, проверить код. это должно делать вашу работу. Здесь я использую «click» событие bubbling в java-скрипте и имеет прослушиватель событий, связанный с элементом класса parent-div. это может быть присоединено к <body/>, если объем элементов должен быть увеличен.
Если вы используете firebug & FF, вы можете установить DEBUG = 1 – Ajaxe
Событие пузырьков и распространение осложняется, если у вас есть несколько событий onclick на странице и прикрепить событие onclick на теле, но пример вам поможет. – dusoft
Я согласен с dusoft, выше на DOM приведет к большему количеству вызовов обработчику 'click' на 'body', также где-то в цепочке «bubbling» на одном из дочерних элементов может 'event.stopPropagation()', где требуемый обработчик никогда не вызывается, и DIV, о котором идет речь, никогда не скрывает/показывает. Цепи обработки событий должны быть рассмотрены. – Ajaxe
ДАЖЕ ЛЕГЧЕ
Вместо того, чтобы установить определенный DIV нажать на, чтобы скрыть элемент, вы можете просто установить все элементы, которые не являются частью «показать мне» элемент, чтобы скрыть при нажатии на.
Пример того, что я имею в виду, в вашем яваскрипта разделе под готовый код место следующее:
$("body *").not('.login, .login *').fadeOut(1000);
// This tells jquery to get all elements, in the body, not containing the
// class login or any subelement of it
// The fade out is just a simple jquery hide animation set to 1 second in this
// example but you can hide it however you want
и посмотреть, как это работает для тебя.
Не могли бы вы предоставить пример разметки для этого? – chris
Вы хотите что-то вроде $ ('# myLink'). Нажмите (ShowHide); –
Прилагаю, что я очень новичок в JQuery и нахожусь на стадии новичка, и я понимаю, что использование onlick в html - это плохая практика, и я бы очень признателен, если бы вы могли показать мне пример наилучшего метода, очень спасибо – chris