javascript - 将mootools中的隐藏/显示函数转换为纯javascript

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/addEvent 到普通的 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>

<小时/>

看一下:

• EventTarget.removeEventListener()
• EventTarget.addEventListener()
• Document.querySelectorAll()
• Event.stopPropagation()

<小时/>

Revised jsfiddle