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

回答

相關問題