如何使用 javascript 打开和关闭子菜单

Question

我对 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>

还有我的CSS：

.sidebarLi ul {
    padding-left: 10px;
    position: absolute;
    right: 9000em;

}

.sidebarLi ul li a {
    color: #003354;
}

.sidebarLi ul li a:hover {
    color: #003354;
    padding: 0 10px;
    width: auto;
    height: auto;
    background-color: #edf3f6;
    border-radius: 5px;
}

请注意，我正尝试从我的子菜单的绝对位置开始，而我的 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 数组中的所有元素。

Answer 1

有几种方法可以解决这个问题。一种简单的方法是使用 jQuery toggleClass。向 ul 标签添加一个活动的 class 并在点击事件中切换 class。

添加此 CSS 样式：

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

}

添加这个 jQuery:

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

如果您不熟悉添加 JQuery - 只需在 </body> 标签之前添加：

<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>

Answer 2

另一个线程的另一个答案，如果你想在 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');
        }
    }
});

fiddle

如何使用 javascript 打开和关闭子菜单

How to click on and off submenu's using javascript

javascript

css

onclick