Question

所以基本上，我的导航栏中有两个下拉菜单，如果我打开一个，然后点击它关闭的任何地方（这很好），但如果我打开一个，然后尝试打开下一个一，第一个保持开放，它们重叠。

我应该为每个菜单做两种不同的javascripts，还是应该重新编写整个javascript ..我几乎不知所措。

非常感谢任何帮助！

我的代码......

＆＃13;

HtmlFieldPrefix

＆＃13;

@Html.Partial("_QuoteFields, Model.Item4, new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo {  HtmlFieldPrefix = "" } })

＆＃13;

function myFunction() {
	"use strict";
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
	"use strict";
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
} 
function myFunction2() {
	"use strict";
    document.getElementById("myDropdown2").classList.toggle("show");
}


window.onclick = function(event) {
	"use strict";
  if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

＆＃13;

Answer 1

试试这个：

function myFunction() {
    "use strict";
    var el = document.getElementById("myDropdown");
    if (el.classList.contains('show')) hideDropdown();
        else el.classList.add('show');
}


function myFunction2() {
    "use strict";
    var el = document.getElementById("myDropdown2");
    if (el.classList.contains('show')) hideDropdown();
        else el.classList.add('show');  
}

function hideDropdown() {
    "use strict";
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }   
}

window.onclick = function(event) {
    "use strict";
    if (!event.target.matches('.dropbtn')) {
        hideDropdown();
    }
}

我的导航栏中有两个下拉菜单，如果一个打开，如果我打开另一个菜单，它就不会关闭

1 个答案: