javascript - jQuery 可调整大小的句柄在单击时可见，在别处单击时隐藏

Question

我正在使用 jQuery 的可调整大小的句柄，我使用 autohide: true 来隐藏句柄。

我的问题是如何在单击相关 div 时使句柄可见，并在单击相关 div 之外的某处时关闭句柄。

    jQuery('#dragDiv').resizable({
          containment: $('#wrapper'),
          handles: 'ne, se, sw, nw',
          //autoHide: true
    });

Answer 1

如何向文档添加点击处理程序以添加/删除可用于控制句柄样式/可见性的焦点类？

$(document).on('click', function(e) {
  $('.resizable').removeClass('focus');
  $resizable = $(e.target).closest('.resizable');
  if ($resizable.length) {
    $resizable.addClass('focus');
  }
});

http://jsbin.com/rocepamiwu/1/edit?html,css,js,output