Question

我正在根据复选框 hack 制作响应式菜单，但遇到了我似乎找不到其他人遇到的问题。由于各种下拉菜单由复选框（汉堡菜单）和单选按钮（菜单项下拉菜单，以避免一次打开多个）控制，因此需要在各种情况下清除它们，以免它们保持打开状态用户浏览网站 - 在浏览器调整大小时，在菜单区域外单击时，在页面加载时使用后退按钮的人等。我不知道一个 Javascript，但我拼凑了代码并学习了通过在这里和其他地方寻找各种帖子来了解一些超基本的概念，这些帖子可以完成所有工作。（除了 jQuery 中的一个触发器之外，所有内容都在 vanilla Javascript 中。）

问题：当通过触发我的“clearallbuttons”功能清除复选框和单选按钮时，如果您点击的下一件事情是打开的任何下拉菜单，则需要点击两次而不是一次来重新打开它- 即在浏览器布局中（768 像素宽和向上），如果“测试 1”下拉菜单打开，然后您在菜单系统外部单击或执行任何其他操作以触发“clearallbuttons”功能，然后立即再次单击“测试” 1，”需要点击两次才能打开下拉菜单。（但是，如果“测试 1”已打开然后被触发关闭，并且您单击的下一件事是“测试 2”，然后单击“测试 1”，则没有问题。）在汉堡菜单配置中，如果您单击汉堡菜单，然后 - 在不打开“测试 1”或“测试 2”的情况下 - 触发它关闭（在菜单下拉菜单之外单击，通过将手机侧向调整浏览器大小等），您需要单击在汉堡菜单上 TWICE 再次打开它。（但是，如果您在汉堡下拉菜单中打开“测试 1”或“测试 2”，然后触发所有内容关闭，则没有问题。仅当您在触发后打开的第一个按钮是您在触发器之前单击的最后一个按钮。）

我尝试了两种不同的 Javascript 函数来清除菜单中的所有复选框和单选按钮。我从两者中得到相同的结果。这是一个：

function clearallbuttons() {
  document.getElementById('form_resetter').reset();

这是另一个（这个不需要 HTML 标记中其他无关的 Form 字段）：

function clearallbuttons(){
    var items=document.getElementsByName('menutoggle');
    for(var i=0; i<items.length; i++){
        if(items[i].type=='radio','checkbox')
            items[i].checked=false;
    }
}

页面上还有 Javascript，允许用户手动单击单选按钮“关闭”。据我所知，这不会导致问题。

以下是现场演示和 CSS 的链接，以及菜单的 HTML 标记和页面上的所有 Javascript。也许，作为一个 Javascript 无知者，我在调用函数的方式上做错了什么？

http://themoviedivision.com/menutest.php

http://themoviedivision.com/style.css

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

<header class="menuheader" id="fullmenu">
<form class="form_resetter" id="form_resetter" onsubmit="return false;">
  <a href="http://themoviedivision.com/menutest.php" class="logo">
    <img src="divisionlogo.png" height="20" width="116"></a>
    <ul class="socialicons">
    <li><a href="https://www.facebook.com/themoviedivision"><i class="fab fa-facebook-f"></i></a></li>
    <li><a href="http://instagram.com/themoviedivision"><i class="fab fa-instagram"></i></a></li>
    <li><a href="https://www.imdb.com/title/tt14069588/" target="_blank"><i class="fab fa-imdb"></i></a></li>
    </ul>

  <input class="menu-btn" type="checkbox" id="menu-btn" name="menutoggle" />
  <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>

  <ul class="menu">
    <li><a href="menutest.php">About</a></li>
    <li><a href="menutest.php">Cast &amp; Crew</a></li>

<li>
  <input class="dropdown-btn" type="radio" id="dropdown-btn" name="menutoggle" />
  <label for="dropdown-btn"><a class="drop-select">Test 1</a></label>
     <div class="dropdown">
     <a href="#">Dropdown 1</a>
     <a href="#">Dropdown 2</a>
     <a href="#">Dropdown 3</a>
     </div>
</li>

<li>
  <input class="dropdown-btn2" type="radio" id="dropdown-btn2" name="menutoggle" />
  <label for="dropdown-btn2"><a class="drop-select">Test 2</a></label>
     <div class="dropdown2">
     <a href="#">Dropdown A</a>
     <a href="#">Dropdown B</a>
     <a href="#">Dropdown C</a>
     </div>
</li>

    <li><a href="menutest.php">JOIN US</a></li>


  </ul>
</form>
</header>

<script type="text/javascript">
// allow radio buttons to be clicked off
var allRadios = document.getElementsByName('menutoggle');
var booRadio;
var x = 0;
for (x = 0; x < allRadios.length; x++) {

  allRadios[x].onclick = function() {

    if (booRadio == this) {
      this.checked = false;
      booRadio = null;
    } else {
      booRadio = this;
    }
  };

}
</script>

<script type="text/javascript">
// define function to close all menu elements
function clearallbuttons() {
  document.getElementById('form_resetter').reset();
}

// close all menu elements on page load
window.onload = function() {
  clearallbuttons();
};

// close all menu elements on browser window resize
window.addEventListener("resize", clearallbuttons);

//close all menu elements when closing hamburger menu
$(document).ready(function()
{
  $('#menu-btn').change(function() 
  {
    if(this.checked != true)
    {
         clearallbuttons();
    }
  });   
});

//close all menu elements when clicking outside the menu area
document.addEventListener("click", (evt) => {
    const flyoutElement = document.getElementById("fullmenu");
    let targetElement = evt.target;

    do {
        if (targetElement == flyoutElement) {
            return;
        }
        targetElement = targetElement.parentNode;
    } while (targetElement);
    clearallbuttons();
});

</script>

（信用到期 - 我从 Codepen 上“mutedblues”中的 CSS Nav 代码开始 - https://codepen.io/mutedblues/pen/MmPNPG - 包括一个可爱的全 CSS 汉堡菜单 - 并从那里扩展。）

感谢您的帮助！

使用 Javascript 清除复选框和单选按钮后需要单击两次

0 个答案: