控制 jQuery 在点击相关 DIV 时的可调整大小的手柄

Question

我动态创建了一堆 DIV。我在它们上使用 jQuery 可调整大小的手柄。

我的问题是如何让手柄出现在 click/hover 上，并在点击相关 div 时让它们消失？

$('.resizable').on('click', function() {
  $(this).addClass('focus');
});

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

Answer 1

您可以通过单击或悬停来绑定它。

点击：

$('.resizable').resizable({
    handles: 'se'
});

////////////////////////////////////////////////////////////////////////////////////
//how do I get the below working? These $('.resizable') DIV are created dynamically

$('.resizable').on('click', function() {
  $(this).addClass('focus');
});

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

.resizable{
    width: 100px;
    height: 100px;
    background-color: red;
    display: inline-block;
}
.resizable.focus {
    background: #f0f;
}

.resizable .ui-resizable-handle {
    background-color: black;
    display: none !important;
}
.resizable.focus .ui-resizable-handle {
    display: block !important;
}

<div id="dragDiv1" class="resizable"></div>

<div id="dragDiv2" class="resizable"></div>

<div id="dragDiv3" class="resizable"></div>

或者，如果您想要悬停，只需将 .resizable.focus 替换为 .resizable:hover。 http://jsfiddle.net/sjchn0L8/2/

控制 jQuery 在点击相关 DIV 时的可调整大小的手柄

Control jQuery resizeable handles when clicked on and out of relevant DIV

html

javascript

css

jquery

jquery-ui