javascript "toggle effect with timeout"窃听因为 "opacity:0"

Question

我开发了一个小的 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 但代码不是很好，“切换效果”有点难看。

感谢您的帮助!

Answer 1

您需要将“overflow:hidden”添加到您的 hidden2 类中。即使高度为 0，内容仍然与容器重叠并与您的链接重叠。