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＃不会消失。

任何帮助表示赞赏。

来源

2010-08-03 estorde

首先，让我们从是线上，删除点击处理程序，以便您的链接变成这样：

<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(); 
    }); 
});

You can give it a try here

我们在这里所做的，走的是event bubbling优势，利用event.stopPropagation()如果点击来自<a>或#hidden，该事件不会去任何地方（不能上升到document，因为它通常会）。如果来自任何地方的click其他得到document，那么它在元素上做一个.fadeOut()，同样用于再次点击“购物车”链接。

来源

2010-08-03 10:03:16

这是一个很好的解决方案，但也许我没有解释一个好方法的情况。现在当＃购物车是“打开”和＃隐藏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

如果你想切换链接的点击褪色，您可以使用toggle()，

$("a.cart-buttom").toggle(function(){ 
    $('#hidden').fadeIn(); 
}, function() { 
    $('#hidden').fadeOut(); 
})

来源

2010-08-03 09:11:09

感谢您的时间...... – estorde 2010-08-03 10:30:14

jQuery的显示/隐藏DIV

回答

相关问题