如何单击和关闭子菜单'；s正在使用javascript

一般来说，我对javascript和web开发相当陌生。我目前正试图让侧边栏导航区域中的子菜单弹出，以响应onclick事件。我可以用一些冗余的javascript单独打开我的子菜单，因为我不知道如何使用循环（如果这是最好的方法的话）。但即使我走到这一步，我也找不出最好的方法来关闭它们。这是我用于侧栏导航的HTML

                   <ul id="sidebarNavUl">

                       <li class="sidebarLi">Main Topic:
                           <ul>
                                <li><a href="#">Sub Topic</a></li>
                           </ul> 
                       </li>

                       <li class="sidebarLi">Main Topic:
                           <ul>
                                <li><a href="#">Sub Topic</a></li>
                           </ul> 
                       </li>

                      <li class="sidebarLi">Main Topic:
                           <ul>
                                <li><a href="#">Sub Topic</a></li>
                           </ul> 
                       </li>

                   </ul>

               </nav>

请注意，我试图从处于绝对位置的子菜单开始，而使用javascript，我计划插入一个内联样式以将它们恢复到静态位置，因为每个主题都是堆叠在一起的，我希望它们在单击时展开（因为在绝对位置，它们不是正常文档流的一部分）。我还将它们移动到右侧9000 em，而不是将它们隐藏起来，以使屏幕阅读器能够看到它们。因此，如果有人能帮助我编写好的javascript代码，在点击时将子菜单的输入和输出显示出来，我将不胜感激。多谢各位

如果你想知道这就是我试图编写的javascript：

var mainSidebarLi = document.getElementsByClassName("sidebarLi");


mainSidebarLi[0].onclick = function () {

   mainSidebarLi[0].getElementsByTagName("ul")[0].style.position = "static";
   mainSidebarLi[0].getElementsByTagName("ul")[0].style.right = "0";

};

var mainSidebarLi = document.getElementsByClassName("sidebarLi");


mainSidebarLi[1].onclick = function () {

   mainSidebarLi[1].getElementsByTagName("ul")[0].style.position = "static";
   mainSidebarLi[1].getElementsByTagName("ul")[0].style.right = "0";

};

---

所以这个过程会重复，直到我得到li数组中的所有元素

有两种方法可以做到这一点。一种简单的方法是使用jQuery toggleClass。将活动类添加到ul标记，并在单击事件时切换该类

添加此CSS样式：

.sidebarLi ul.active {
position:relative;
left: 0;    

}

添加此jQuery：

$('#sidebarNavUl li').click(function() {
$(this).children('ul').toggleClass('active');
});

如果您是添加JQuery的新手-只需在您的

标记之前添加以下内容：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$('#sidebarNavUl li').click(function() {
$(this).children('ul').toggleClass('active');
});
</script>

$（'sidebarNavUl li'）。单击（函数（）{
$（this）.children（'ul'）.toggleClass（'active'）；
});

另一个线程的另一个答案，如果您想在li标记中使用标记：

$('.expandingNav').on('click', function (e) {
    if ($(e.target).closest('ul').parent('nav.sidebar').length) {
        if ($(this).hasClass('expanded')) {
            $(this).children('.hidden').slideUp();
            $(this).removeClass('expanded');
        } else {
            $(this).children('.hidden').slideDown();
            $(this).addClass('expanded');
        }
    }
});

---

请显示您的js代码。像这样吗？点击第二项谢谢！你是个救生员。工作得很有魅力。是的，我还不太了解jquery。但看起来我需要这样。出于好奇，有没有办法用javascript实现这一点？还是太复杂了？好的，谢谢，这看起来也行。回答得很好。如果这对你有帮助，你能投票支持这个答案吗？或者，如果你认为这是正确的答案，请记住：）好吧，我现在还不能投票，因为我没有足够的声誉。哈哈。没关系，试着回答更多的问题：）

$('.expandingNav').on('click', function (e) {
    if ($(e.target).closest('ul').parent('nav.sidebar').length) {
        if ($(this).hasClass('expanded')) {
            $(this).children('.hidden').slideUp();
            $(this).removeClass('expanded');
        } else {
            $(this).children('.hidden').slideDown();
            $(this).addClass('expanded');
        }
    }
});