Question

祝大家新年快乐！我是JS初学者，正在玩网页上的圆形菜单。这是圆形菜单：

https://codepen.io/bennettfeely/pen/qRJOZJ/

我已经用11次响铃实现了此菜单。 “菜单”和“关闭”按钮起作用。当我单击菜单项时，它将转到该项，但菜单保持打开状态。单击该项目或单击页面上其他任何位置时，我都需要关闭菜单。我觉得解决方案完全在JS脚本中。但是在我看来，JS是完整的，我不明白为什么它不起作用。

setTimeout(function(){
    nav.classList.toggle('open');   
}, 800);

应该这样做，对吗？还是缺少什么？我还添加了

<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

我注意到我的html代码实际上是jquery而不是JS，但这没有帮助。

这就是我将菜单项链接保留在标记中的方式：

<a href="#scuola" class="disc l7">
<div>scuola</div>
</a>
<a href="#attivita" class="disc l8">
<div>attività</div>
</a>
<a href="#chi" class="disc l9">
<div>chi siamo</div>
</a>
<a href="index.html" class="disc l10">
<div>home</div>
</a>
<a class="disc l11 toggle">
Menu
</a>
</nav><!--menu end-->

Answer 1

您可以尝试以下代码或检查DEMO

toggle = document.querySelectorAll(".toggle")[0];
var timeout;
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';

document.onclick= function(event) {
    window.clearTimeout(timeout);
    // Compensate for IE<9's non-standard event model
    //
    if (event===undefined) event= window.event;
    var target= 'target' in event? event.target.id : event.srcElement;
if(target!="menu"){
    timeout = setTimeout(function(){
    nav.classList.toggle('open');   
}, 800)
    toggle.innerHTML = toggle_open_text;
}
};

    toggle.addEventListener('click', function() {
    nav.classList.toggle('open');

  if (nav.classList.contains('open')) {
    toggle.innerHTML = toggle_close_text;
  } else {
    toggle.innerHTML = toggle_open_text;
  }
}, false);


timeout= setTimeout(function(){
    nav.classList.toggle('open');   
}, 800)

您可能希望查看here，以了解有关如何检测浏览器点击的详细信息。

更新：有关超时的更多详细信息，请参考here和here。

单击菜单元素上的JS关闭菜单

1 个答案: