jquery 显示/隐藏 div

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-按钮

<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()，事件不会去任何地方（不会冒泡到@ 987654334@，通常情况下）。如果click 从任何地方else 到达document，那么它会在元素上执行.fadeOut()，再次单击“购物车”链接也是如此。

Answer 2

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

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