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