Question

我有一个可编辑的div，当它聚焦时会在其下方打开一个工具栏。如何在创建的项目（url(r'^messages/', include('postman.urls', namespace='postman')),）再次模糊消失之前单击它？有没有比设置长setTimeout更干净的方法？

#toolbar

$('#child').on('focus', function(e) {
  $('#parent').append('<div id="toolbar">Click me and an alert should open!</div>');
});
$('#child').on('blur', function(e) {
  var $item = $('#parent').find('#toolbar');
  $item.css('opacity', 0)
  setTimeout(function() {
    $item.remove();
  }, 100);
});
$(document).on('click', '#toolbar', function(e) {
  alert('How can I get this to show without a mega-long setTimeout?');
});

#toolbar { cursor: pointer; }
#child { white-space: pre-wrap; }
#child { line-height: 1em; height: 1em; overflow: hidden; }
#child:focus { height: 3em; }

Answer 1

对我来说，我要在transition上添加opacity效果。

编辑：经过测试，发现{{1}在浏览器上有时会错过对div的点击（这需要先按下鼠标然后再向上拖动才能进行点击）。 }}消失得太快了（100毫秒的移除时间）。您可以更改为使用div来创建更一致的行为，或者延长项目删除计时器。

编辑：根据您最新的要求，mousedown似乎运行良好。

mousedown

$('#child').on('focus', function(e) {
  $('#parent').append('<div id="toolbar">Click me and an alert should open!</div>');
});
$('#child').on('blur', function(e) {
  var $item = $('#parent').find('#toolbar');
  $item.css('opacity', 0)
  setTimeout(function() {
    $item.remove();
  }, 500);
});
$(document).on('mousedown', '#toolbar', function(e) {
  alert('How can I get this to show without a mega-long setTimeout?');
});

#toolbar { cursor: pointer; }
#child { white-space: pre-wrap; }
#child { line-height: 1em; height: 1em; overflow: hidden; }
#child:focus { height: 3em; }

仅显示可点击项？

1 个答案: