Question

我在a SO answer中找到了以下功能：

function toggleTooltip(id) {
    var e = document.id(id);
    if( !e.toggleCallback ) {
        e.toggleCallback = function() { toggleTooltip(id); };
    }
    if(e.style.display=='block') {
        e.style.display='none';
        document.removeEvent('click', e.toggleCallback);
    } else {
        e.style.display='block';
        document.addEvent('click', e.toggleCallback);
    }
}

单击它会显示一个特定元素，然后单击它隐藏它的任何位置。可以找到一个工作示例here。

我喜欢将它用作纯粹的javascript函数（即没有mootools依赖），但我真的不明白我如何转换函数toggleCallback / removeEvent / {{1}正常的javascript。

非常感谢任何帮助。

Answer 1

你可以这样做：

// Might want to use document DOMContentLoaded event instead of load.
window.addEventListener('load', function() { 
  document.querySelectorAll('a.tooltip').forEach(function(link) {
    var tooltip = document.getElementById(link.id + '_tooltip'),
      callback = function(e) {
        if (tooltip.style.display === 'block') {
          tooltip.style.display = 'none';
          document.removeEventListener('click', callback);
        } else {
          tooltip.style.display = 'block';
          document.addEventListener('click', callback);
        }
        e.stopPropagation();
      };
    link.addEventListener('click', callback);
  });
});

<a class="tooltip" id="link1" href="#">Show tooltip</a>
<div style="display:none" id="link1_tooltip">Click anywhere to dismiss</div>

看看：

将mootools中的隐藏/显示功能转换为纯javascript

1 个答案:

Revised jsfiddle