Question

我有下一个jquery代码：

    <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＃hidden来获得一个黑暗的背景（灯箱背景的种类），然后在A点击后显示＃shopping-cart div，包括表格，输入等元素。 .cart-BUTTOM

<a href="#" title="" onClick="ShowHide(); return false;" class="cart-buttom">Cart</a>

用户点击A按钮后，为了显示购物车，显示div＃hidden。我想知道，如果用户点击div＃shopping-cart的外部，或者再次在A链接中，div＃hidden是fadeOut。

现在点击A链接后，启动div＃shopping-cart的动画，但div＃hidden不会消失。

感谢任何帮助。

Answer 1

首先，让我们将该点击处理程序从内联中删除，以便您的链接变为：

<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，如果点击来自<a>或#hidden，则使用event.stopPropagation()，事件不会发生在任何地方（不会像通常那样冒泡到document。如果 else 中的click到达document，那么它会对元素执行.fadeOut()，同样再次点击“购物车”链接也是如此。

Answer 2

如果您想在点击链接时切换淡入淡出，可以使用toggle()，

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

jquery show / hide div

2 个答案: