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