创建一个列表，用户可以在其中单击按钮并将鼠标悬停在某个元素上，以打开另一个列表

Question

我有一个列表，看起来像这样：

<ul>
  <li>
    <div class="hold">Click and hold this button for 500ms</div>
    <div class="show">And this element should appear.</div>
  </li>
  <li>
    <div class="hold">Click and hold this button for 500ms</div>
    <div class="show">And this element should appear.</div>
  </li>
</ul>

我只希望用户单击并按住.hold div，并在经过500毫秒后出现.show div。

Answer 1

这是我的解决方案：https://jsfiddle.net/xwg4jey9/11/

  $(".show").hide(0);

  var timeoutId = 0;

  var showHiddens = function(hold) {
    var show = $(hold).closest("li").find(".show");
    show.show();
  }

  $('.hold').on('mousedown', function() {
    var hold = this;
    timeoutId = setTimeout(function() {
      showHiddens(hold);
    }, 500);
  }).on('mouseup mouseleave', function() {
    clearTimeout(timeoutId);
  });

Answer 2

您可以在Google上找到大量解决方案，但是我将使用 jQuery 来解释一个简单的解决方案。

您有两个由各自的类表示的元素。点击保持器元素.hold和要显示的元素.show。

由于.hold元素负责触发该函数以显示隐藏的元素，因此我们添加了两个事件侦听器，一个用于侦听鼠标单击的事件侦听器，另一个用于侦听鼠标的释放。

我们定义了一个mousedown事件，该事件将在指针位于元素内部时按下定点设备按钮时在.hold元素上触发。此时，我们将启动timer 500毫秒。如果没有清除timer，它将调用showElements()方法以显示隐藏的元素。

现在，要知道鼠标何时释放元素，我们将结合两个事件：与mouseup事件相反的mousedown事件和mouseleave事件，即当定点设备的光标移出.hold元素时触发。此事件将通过timer事件清除mousedown设置。

使用slideToggle()

更新节目

只需将hidden.show();替换为hidden.slideToggle('slow');

这是实现。

let timer;

function showElements(holder) {
  let hidden = $(holder).closest('li').find('.show');
  hidden.slideToggle('slow');
}

$(function() {
  console.log("ready!");
  $(".show").hide(0);
});

$('.hold')
  .on('mousedown', function() {
    let holder = this;
    timer = setTimeout(function() {
      showElements(holder);
    }, 500);
  })
  .on('mouseup mouseleave', function() {
    clearTimeout(timer);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="hold">Click and hold this button for 500ms</div>
    <div class="show">And this element should appear.</div>
  </li>
  <li>
    <div class="hold">Click and hold this button for 500ms</div>
    <div class="show">And this element should appear.</div>
  </li>
</ul>