javascript - 分叉弹性网格插件能够通过单击屏幕上的任意位置来关闭预览

Question

我正在将弹性网格插件用于站点上的网格显示系统，但我希望能够简单地单击展开的视图并自动关闭，而无需按照插件的建议单击缩略图或“x”按钮.

我浏览了一下代码，认为这是我需要编辑的地方

function initEvents() {
    //when clicking an item, show the preview with the items info and larg image;
    //close the item if already expanded.
    //also close if clicking on the item's cross
    $items.on( 'click', function(e) {
        hidePreview();
        return false;
    } ).children( 'a' ).on( 'click', function(e) {
        
        var $item = $( this ).parent();
        //check if item already opened
        current === $item.index() ? hidePreview() : showPreview( $item );
        return false;
    });

但是，我不确定该怎么做。我试图实现这里提到的这种方法，但没有运气。对此的任何指导将不胜感激。

插件供参考： http ://demo.phapsu.com/jquery.elastic_grid/

Answer 1

如果您还没有找到答案，请将其添加到您的 js 页面，如果您单击页面中的任何位置，除了它自己的扩展视图之外，它将关闭扩展视图。

$('body').click(function(evt){    
       if(evt.target.class== "og-expander")
          return;
       // For descendants of menu_content being clicked, remove this
       // check if you do not want to put constraint on descendants.
       if($(evt.target).closest('.og-expander').length)
          return;             
        $(".og-close").trigger("click");  
});