javascript - javascript脚注：如何隐藏它点击任何地方

Question

我有一个网站，上面有几篇带脚注的论文。
到目前为止，我采用了经典的系统，即通过内部链接引用文章底部的脚注，然后您可以通过单击注释编号从该链接返回论文正文。
但我发现使用 javascript 可以有一个更舒适的系统，将脚注保留在您正在阅读的屏幕内。
代码是这样的：

  function toggleDiv (divId) {
     $ ("#" + divId) .toggle ();
  }

.dynamicnote {display: none;  
   position: fixed;  
   bottom: 2%;  
   margin-left: auto;  
   margin-right: auto;}

<a href = "javascript: toggleDiv ('n1');" id = "1a"> 1 </a>  

<p id = "n1" class="dynamicnote"> <a href="#1a"> 1 </a> [sometext] </p>

问题是，如果我单击锚点（一旦阅读注释），这将非常有效，然后脚注消失了；否则，如果我单击下一个锚点，新的脚注会覆盖前一个脚注，这很丑陋且令人困惑。你可以在这个url看到这个脚本

怎么修？也许使用 javascript 命令来隐藏在任何地方点击显示的 div？

标签： javascripthtmlcssfootnotes

Answer 1

更新的答案：如果情况更糟，请告诉我，我会把旧的放回去。更新二：这只适用于第二次点击，所以第一个链接不会有动画（但仍然像第一个一样工作）。我仍在研究第一次点击的解决方案。同样，如果情况更糟，请告诉我。

var currDiv = 'footNote';
function toggleDiv(divId) {
  if(currDiv=='footNote'){
    document.getElementById('footTwo').classList.add('no-height');
    document.getElementById('footTwo').innerHTML='';
    document.getElementById('footNote').classList.remove('no-height');
    var elem = document.getElementById(divId).cloneNode(true);
    elem.id = 'fntext';
    document.getElementById('footNote').appendChild(elem);
    var ftnt= document.getElementById('fntext');
    ftnt.replaceWith(...ftnt.childNodes);
    currDiv=0;
  }else{   
    document.getElementById('footNote').classList.add('no-height');
    document.getElementById('footNote').innerHTML='';
    document.getElementById('footTwo').classList.remove('no-height');
    var elem = document.getElementById(divId).cloneNode(true);
    elem.id = 'fntext';
    document.getElementById('footTwo').appendChild(elem);
    var ftnt= document.getElementById('fntext');
    ftnt.replaceWith(...ftnt.childNodes);
    currDiv = 'footNote';
  }
}

document.addEventListener("click", e => {
  if(e.target.className!=='href'){
    document.getElementById('footNote').innerHTML = '';
    document.getElementById('footTwo').innerHTML = '';
  }
});

.ftn {
  position: fixed;
  bottom: 10%;
  margin-left: auto;
  margin-right: auto;
  max-height: 100%;
  overflow: hidden;
  transition: max-height 0.8s ease-in-out;
}

.no-height {
  max-height:0;
  transition: max-height 0.8s ease-in-out;
  overflow-y: hidden;
}
.hide {
  display: none;
  color: red;
}

<a href="#1a" onclick='toggleDiv("n1")' id="1a" class='href'> 1 </a>
<div id="n1" class="hide">
  <a href="#1a"> 1 </a> [sometext]
</div>
<br>
<a href="#2a" onclick='toggleDiv("n2")' id="2a" class='href'> 2 </a>
<div id="n2" class="hide">
  <a href="#2a"> 2 </a> [sometext2]
</div>

<div id='footNote' class='ftn'> </div>
<div id='footTwo' class='ftn'> </div>