jQuery可调整大小的句柄在单击时可见，在其他位置单击时隐藏

Question

I'm using jQuery's resizable handles and I use autohide: true to hide the handles.

My question is how can I make the handles visible when the relevant div is clicked and turn the handles off when clicked somewhere out of the relevant div.

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

Answer 1

How about adding a click handler to the document to add/remove a focus class which you can use to control the style/visibility of the handles?

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