两个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

希望这有助于！