Question

我有一个下拉菜单，但我无法弄清楚如何关闭上一个菜单。所有的菜单都保持打开状态，所以当不同的菜单打开时，我需要它们关闭。

请看我的jsfiddle https://jsfiddle.net/yvhnphp4/

$(document).ready(function(){
  // Dropdown menu
  var findDropdowns = document.querySelectorAll(".has-dropdown");
  for(var i = 0; i < findDropdowns.length; i++) {
    if(i == 0) {
        var dropdownId = "has-dropdown-1";
        findDropdowns[i].setAttribute("id", dropdownId);
    }else {
        var addOneToIndex = i + 1;
        dropdownId = "has-dropdown-" + addOneToIndex;
        findDropdowns[i].setAttribute("id", dropdownId);
    }
    var targetDropdown = document.getElementById(dropdownId);
    targetDropdown.onclick = dropdownTrigger;

  }
function dropdownTrigger(e) {
    e.preventDefault();
    var showHideDropdown = e.target.nextElementSibling;

    showHideDropdown.setAttribute("class", "show");
}
});

<ul class="nav">
 <li><a class="has-dropdown" href="">Link</a>
                        <ul>
                            <li><a href="">Sub-Link</a></li>
                            <li><a href="">Sub-Link</a></li>
                            <li><a href="">Sub-Link</a></li>
                        </ul>
                    </li>
                    <li><a class="has-dropdown" href="">Link</a>
                        <ul>
                            <li><a href="">Sub-Link</a></li>
                            <li><a href="">Sub-Link</a></li>
                            <li><a href="">Sub-Link</a></li>
                        </ul>
                    </li>
                </ul>

.nav ul {display:none;}
.nav ul.show{display:block;}

Answer 1

您可以在打开新下拉菜单之前，从.show中仍然拥有它的所有ul标记中删除.nav类：

function dropdownTrigger(e) {
    var opened = document.querySelectorAll(".nav ul.show");
    for(var i = 0; i < opened.length; i++) {
        opened[i].removeAttribute("class");
    }

    ...
}

请注意，由于您仍在使用jQuery（$(document).ready），因此可能会有much better way to do this。

另外，use href="#" instead of href=""。

JS下拉菜单行为

1 个答案: