时间戳

首页 > 解决方案 > 展开-折叠菜单建议

html - 展开-折叠菜单建议

问题描述

我正在尝试为我正在处理的一个副项目实现一个展开-折叠 ul 和 li 列表，但我似乎无法让它工作。我有它所以在 li 点击（页面重定向）它折叠 ul，但我不能再切换了。

<!DOCTYPE html>
<head>
<script>
$(document).ready(function () {
    $('.dropdown-toggle').on('click', function () {
        var tab_id = $(this).attr('data-tab');
        $("#"+tab_id).toggleClass('current');
    })
    $('.collapse-list-unstyled li').click(function(){
        $('.collapse-list-unstyled').hide("slow");
    })


}); 
</script>
</head>
<body>
<ul class="list-unstyled components" id="tabs">
    <li>
        <a href="#" data-tab="drop-01Submenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Drop-1</a>
           <ul class="collapse-list-unstyled" id="drop-01Submenu">
               <li><a href="#" class="tab-link-a" data-tab="tab-4">LI-1</a></li>
               <li><a href="#" class="tab-link-a" data-tab="tab-5">LI-2</a> </li>
           </ul>
   </li>

</ul>
</body>
</html>

标签： htmljquerycss

解决方案

您可以像隐藏它一样显示它。只需更改触发器并将隐藏更改为显示。 https://codepen.io/richiegarcia/pen/RwWgorE

$(document).ready(function() {
    $('.dropdown-toggle').click(function() {
        $('.collapse-list-unstyled').show("slow");
        var tab_id = $(this).attr('data-tab');
        $("#" + tab_id).toggleClass('current');
    })
    $('.collapse-list-unstyled li').click(function() {
        $('.collapse-list-unstyled').hide("slow");
    })


});

推荐阅读