Question

我有问题。我有这个菜单，点击下拉菜单，如果没有任何反应，我希望它在5秒后返回。我到目前为止。但是有一个小故障，当我点击它返回时，它会在5秒后出现，而不会询问。它是否有可能检查它是否仍然可见然后返回，如果没有，保持冷静并继续？

以下是代码：

$(document).ready(function () {
  $('#aktivs-share').click(function() {     
  $('#share').slideToggle('slow', function() {  });
  setTimeout(function() {
  $('#share').slideToggle('slow', function() {  });
}, 5000);
});
 $('#aktivs').click(function() {
  $('#valodas').slideToggle('slow', function() {  });
  setTimeout(function() {
  $('#valodas').slideToggle('slow', function() {  });     
 }, 5000); 
});
});

Answer 1

您需要跟踪菜单所处的状态，然后使用clearTimeout（）清除菜单状态关闭时的超时。

（代码未经测试，但希望你能得到这个想法）


    var shareOpen = false;
    var shareTimeoutHandle = undefined;
    $('#aktivs-share').click(function() {
        $('#share').slideToggle('slow', function() {  });

        // check the current state, if open already, close and reset
        if (shareOpen) clearTimeout(shareTimeoutHandle);
        else {
            shareTimeoutHandle = setTimeout(function() {
                $('#share').slideToggle('slow', function() {  });
            }, 5000);
        }
        // set the new state to be the opposite
        shareOpen = !shareOpen;
    });

Answer 2

请记住setTimeout的返回值，这是一个可以通过clearTimeout取消它的句柄。

在您的情况下，由于您希望使用多个内容执行此操作，因此最好通过data将实际上的计时器句柄存储在元素上。

您可以考虑为自己编写一个插件方法来执行此操作，以避免重复逻辑。 slideToggleAutoClose或其他什么。： - ）

设置超时禁用

2 个答案: