兩個div點擊只在一個DIV

Question

我使用jQuery和Ajax創建一個抽屜（#DrawerContainer）和加載內容到它，如果我在畫廊點擊縮略圖事件的作品。我的功能已接近完成，但如果再次單擊打開按鈕（現在#current），我希望能夠關閉該抽屜。

這是我的代碼jsfiddle：http://jsfiddle.net/RF6df/54/
如果您點擊一個方形/縮略圖，它是藍色的矩形，出現抽屜元素。 當前縮略圖變爲綠色。

我加入我的抽屜裏一個按鈕（的jsfiddle不可見）將其關閉。爲了這個目的，我使用這部分代碼，它的功能就像一個魅力。

 // Close the drawer 
     $(".CloseDrawer").click(function() { 
      $('#DrawerContainer').slideUp() 
       setTimeout(function(){ // then remove it... 
        $('#DrawerContainer').remove(); 
       }, 300); // after 500ms. 
      return false; 
     }); 

現在我需要我的#current股利能夠以上關閉#DrawerContainer代碼以同樣的方式.CloseDrawer一樣。
不幸的是添加第二個觸發這樣$("#current,.CloseDrawer").click(function()到我的功能無法正常工作......當我點擊「當前」的縮略圖，它只是重新打開抽屜，而不是關閉它...

如何修改我的代碼用「當前」縮略圖關閉我的#DrawerContainer？

請記住，我正在學習jQuery的，所以如果你可以發表評論它可能是一個很大的幫助。並且請不要修改我的標記或CSS，因爲一切都在關閉部分旁邊工作。

Answer 1

按我的理解，你可以使用「切換（）」函數，它不完全一樣（即，切換可視性）。

$('#DrawerContainer').toggle(); 

編輯： 更新了腳本工作。

$(document).ready(function() { 

    $.ajaxSetup({cache: false}); 

    $('#portfolio-list>div:not(#DrawerContainer)').click(function() { 
     if ($(this).attr("id") != "current") 
     { 
    // modify hash for sharing purpose (remove the first part of the href) 
    var pathname = $(this).find('a')[0].href.split('/'), 
      l = pathname.length; 
     pathname = pathname[l-1] || pathname[l-2]; 
     window.location.hash = "#!" + pathname; 

    $('#current').removeAttr('id'); 
    $(this).attr('id', 'current'); 

    // find first item in next row 
    var LastInRow = -1; 
    var top = $(this).offset().top; 
    if ($(this).next().length == 0 || $(this).next().offset().top != top) { 
     LastInRow = $(this); 
    } 
    else { 
     $(this).nextAll().each(function() { 
      if ($(this).offset().top != top) { 
       return false; // == break from .each()    
      } 
      LastInRow = $(this); 
     }); 
    } 
    if (LastInRow === -1) { 
     LastInRow = $(this).parent().children().last(); 
    } 

    // Ajout du drawer 
    var post_link = $(this).find('.mosaic-backdrop').attr("href"); 
     $('#DrawerContainer').remove(); // remove existing, if any 
     $('<div/>').attr('id', 'DrawerContainer').css({display: 'none'}).data('citem', this).html("loading...").load(post_link + " #container > * ").insertAfter(LastInRow).slideDown(300); 
     return false; // stops the browser when content is loaded 
    } 
    else { 
      $('#DrawerContainer').slideUp(300); 
     $(this).removeAttr("id"); 
    } 

    }); 

    $(document).ajaxSuccess(function() { 

     Cufon('h1'); //refresh cufon 

     // Toggle/close the drawer 
     $("#current,.CloseDrawer").click(function() { 
      $('#DrawerContainer').slideToggle() 
       setTimeout(function(){ // then remove it... 
        $('#DrawerContainer').remove(); 
       }, 300); // after 500ms. 
      return false; 
     }); 

    }); 

    //updated Ene's version 
    var hash = window.location.hash; 
    if (hash.length > 0) { 
     hash = hash.replace('#!' , '' , hash); 
     $('a[href$="'+hash+'/"]').trigger('click'); 
    } 

}); 

而且，在這裏更新它：Updated JS Fiddle

編輯-2：Updated Link

希望這有助於！