javascript”;具有超时的切换效果”;窃听是因为一个“;不透明度:0〃;

我开发了一个小javascript来为对象添加切换效果（是的，我知道jquery会这样做，但我不想为此加载jquery）。

我已经完成了以下代码：

function nice_toggling(button_id, container_id) {
    var container_div = document.getElementById(container_id)
    var left_margin = container_div.style.marginLeft
    // create the css classes so no extra css be necessary
    var css_clases = document.createElement('style');
    css_clases.type = 'text/css';
    css_clases.innerHTML = '.hidden1 {display: none;} .hidden2 {opacity: 0}';
    document.getElementsByTagName('head')[0].appendChild(css_clases);
    container_div.className = 'hidden1 hidden2'
    container_div.style.height= '0px'   
    // This avoids displaying the div
    setTimeout(function () {
        container_div.style.transition='all .10s linear'
    }, 50);

    document.getElementById(button_id).onclick=function () {
      if (container_div.className.indexOf('hidden1') > -1) {
         container_div.style.marginLeft= left_margin
        container_div.className = container_div.className.replace(/hidden1/g,'')
        setTimeout(function () {
          container_div.className = container_div.className.replace(/hidden2/g,'')
          container_div.style.height = 'auto'   
        }, 5);
      } else {
        container_div.className = container_div.className+' hidden2'        
        setTimeout(function () {
          container_div.className = container_div.className+' hidden1'
          setTimeout(function () {
            container_div.style.height= '0px'
            container_div.style.zIndex = '-1'
          }, 290);        
        }, 5);    
      }
    }   
    }

它工作得很好，只是在我的网站上，我使用了一个div，它在nice_toggling函数处理的容器后面有链接。正因为如此，无法点击div的第一个链接。

我在jsfinddle 上重新创建了一个最小的工作示例

有趣的是，当我设置{opacity: 1}时，代码运行良好！（当然，我们可以看到"隐藏文本"）

我真的很想了解为什么这个代码不起作用，以及是否有更好的解决方案，只设置不透明度。我想避免用户点击"隐藏链接"。

我尝试设置margin-left: -1000px，但代码不太好，"切换效果"有点难看。

谢谢你的帮助！