jQuery的显示/隐藏DIV
问题描述:
我的下一个jQuery代码:jQuery的显示/隐藏DIV
<script>
$(document).ready(function() {
// hides the slickbox as soon as the DOM is ready
// (a little sooner than page load)
$('#hidden').hide();
});
//<![CDATA[
function ShowHide(){
$('#hidden').fadeIn();
$("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
}
//]]>
</script>
我使用DIV#隐藏在它(一种收藏的背景),以获得一个黑暗的背景,我展示#购物的车DIV包括像表,输入等一些元素做后点击在A.cart-BUTTOM
<a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom">Cart</a>
用户后进行点击A键,展现了车,在div#隐藏被显示。我想知道如果用户点击div#shopping-cart之外,或者在A链接中再次点击div#hidden为fadeOut,我会做出决定。
现在点击A链接后,开始div#shopping-cart的动画,但隐藏的div#不会消失。
任何帮助表示赞赏。
答
首先,让我们从是线上,删除点击处理程序,以便您的链接变成这样:
<a href="#" class="cart-buttom">Cart</a>
那么你的jQuery看起来是这样的:
$(function() {
$('#hidden').hide().click(function(e) {
e.stopPropagation();
});
$("a.cart-buttom").click(function(e) {
$('#hidden').animate({ opacity: "toggle" });
$("#shopping-cart").animate({"height": "toggle"}, { duration: 550 });
e.stopPropagation();
});
$(document).click(function() {
$('#hidden').fadeOut();
});
});
我们在这里所做的,走的是event bubbling优势,利用event.stopPropagation()
如果点击来自<a>
或#hidden
,该事件不会去任何地方(不能上升到document
,因为它通常会) 。如果来自任何地方的click
其他得到document
,那么它在元素上做一个.fadeOut()
,同样用于再次点击“购物车”链接。
这是一个很好的解决方案,但也许我没有解释一个好方法的情况。 现在当#购物车是“打开”和#隐藏div出现..如果您点击#购物车上的任何地方#隐藏div使fadeOut和#购物车不移动。但我希望当用户点击除#shopping-cart以外的任何地方启动这两个事件。 顺便说一下, buttom是在div#购物车 – estorde 2010-08-03 10:29:40
@estorde - 我仍然不是100%清楚,请看看这个:http://jsfiddle.net/nick_craver/68gYU/1/你是这个意思吗? – 2010-08-03 10:40:04
@尼克:这不是我需要的东西。我会试着再解释一遍。现在看看:http://jsfiddle.net/68gYU/19/ 乞讨时,#购物车应该隐藏在页面的顶部。然后,当您点击卡通按钮时,#购物车向下移动,保持与他的“父亲”#购物车相同的相对位置,同时隐藏的div#出现在此位置。 然后,如果用户点击或背景中的任何位置(除#shopping-cart外),元素将恢复原始位置和状态。 –
estorde
2010-08-03 11:46:01