Javascript 单击“显示元素”并隐藏另一个元素

我只需要在单击时显示一个ul列表，并隐藏所有其他未单击的列表（如果它们处于打开状态）。我想不出来。请参阅下面的演示。我有这个工作，否则。就是搞不懂那部分

.nav ul{显示：无；}
.nav ul.show{display:block；}
















var findDropdowns=document.querySelectorAll（“.has dropdown”）；
var新下拉菜单；
功能下拉菜单（锚定）{
this.anchor=锚；
}
对于（变量i=0；i

试试这段代码，我已经做了一些修复

//下拉菜单
var findDropdowns=document.querySelectorAll（“.has dropdown”）；
var toArray=函数（集合）{return[].slice.call（集合）}
toArray（findDropdowns）.forEach（函数（e）{
e、 addEventListener（“点击”，功能（ev）{
ev.preventDefault（）；
var others=toArray（document.queryselectoral（“.show”）；
其他。forEach（功能（o）{
o、 类列表。删除（“显示”）；
});
e、 parentNode.children[1].classList.add（“show”）；
}，假）；
});
.nav ul{显示：无；}
.nav ul.show{display:block；}















我觉得你把事情弄得太复杂了。只需使用简单的jQuery就可以做到这一点


$（函数（）{
$（“.has下拉列表”）。单击（函数（e）{
e、 预防默认值（）；
$（'.nav li ul'）.removeClass（'show'）；//隐藏所有下拉列表
$（this）.sides（“.nav ul”）.addClass（“show”）；//显示单击的下拉列表
});
});
.nav-ul{
显示：无；
}
.nav ul.show{
显示：块；
}






















可能应该是兄弟姐妹（“ul”）
检查我的答案。我认为这是你所期待的：这看起来不错，而且似乎有效！我想知道我们是否可以切换下拉列表，使其显示/隐藏onclick。现在，只有当您单击另一个下拉列表时，它才会关闭。如果您能解释一下这段代码实际上在做什么，那就太好了。我了解其中一些。
  .nav ul {display:none;}
  .nav ul.show{display:block;}

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

    var findDropdowns = document.querySelectorAll(".has-dropdown");
    var newdropdownMenu;

    function dropdownMenu(anchor) {
        this.anchor = anchor;
    }

    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);
    }

    newdropdownMenu = new dropdownMenu(dropdownId);

    var targetDropdown = document.getElementById(newdropdownMenu.anchor);

    $(targetDropdown).click(function (e) {
        e.preventDefault();
            $(this).siblings(".nav ul").addClass("show");


    });

    }