两个divs click事件仅适用于一个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 div能够以#DrawerContainer的方式关闭.CloseDrawer上面的代码。
不幸的是，在我的功能中添加第二个触发器$("#current,.CloseDrawer").click(function()是行不通的...当点击我的“当前”缩略图时，它只是重新打开抽屉而不是关闭它......

如何修改我的代码以使用“当前”缩略图关闭我的#DrawerContainer？

请记住，我正在学习jquery，所以如果你能评论它可能会有很大的帮助。请不要修改我的标记或CSS，因为一切都在关闭部分旁边。

Answer 1

根据我的理解，你可以使用“toggle（）”函数，它完全相同（即切换可见性）。

$('#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

希望这有助于!!