jquery show/hide 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.cart-点击一下,显示#shopping-cart div,包括表格,输入等元素. 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();
  });
});

你可以在这里尝试一下

我们在这里做的是利用事件冒泡,event.stopPropagation()如果点击来自<a>或#hidden,事件不会去任何地方(不会document像往常一样冒泡).如果click从其他任何地方到达document它然后它.fadeOut()在元素上执行,则再次单击"购物车"链接也是如此.