单击时隐藏和显示无序列表的元素

Question

我正在尝试构建侧栏导航，其中列出了类别。 使用该按钮可以在单击时扩展特定类别的子类别。 我没有这样做。 为此，我正在使用jQuery。 这是我的功能

<script>
$(document).ready(function(){
$( '.side-nav ul' ).slightSubmenu({
    buttonActivateEvents : 'click',
    handlerButtonIn : function($submenuUl) {
        $submenuUl.show(200);
    },
    handlerForceClose : function($submenuUl) {
        $submenuUl.hide(200);
    },
    prependButtons              : true
});
$('.side-nav ul.expand').show();
$('.side-nav li').click(function(){
    $(this).parent().toggleClass('collapse expand');
});
$('.side-nav .selection-path > span').addClass('opened');
});
</script>

这是我要构建的 。 关于扩展这个 。 我的问题是，CSS会发生这种情况吗？ 如果是，那怎么办？ 如果有人提供相同的参考，请向我提供该网站的网址。 谢谢！

Answer 1

如果要使用CSS创建可折叠树，可以使用如下目录模式设计：

 *{margin:0;padding:0;} body{padding:100px;background:#929292;font-size:100%;font-family:"Arial";} input{font-size:1em;} ol.tree{padding-left:30px;} li{list-style-type:none;color:#fff;position:relative;margin-left:-15px;} li label{padding-left:37px;cursor:pointer;background:url("https://www.thecssninja.com/demo/css_tree/folder-horizontal.png") no-repeat 15px 2px;display:block;} li input{width:1em;height:1em;position:absolute;left:-0.5em;top:0;opacity:0;cursor:pointer;} li input + ol{height:1em;margin:-16px 0 0 -44px;background:url("https://www.thecssninja.com/demo/css_tree/toggle-small-expand.png") no-repeat 40px 0;} li input + ol > li{display:none;margin-left:-14px !important;padding-left:1px} li.file{margin-left:-1px !important;} li.file a{display:inline-block;padding-left:21px;color:#fff;text-decoration:none;background:url("https://www.thecssninja.com/demo/css_tree/document.png") no-repeat 0 0;} li input:checked + ol{height:auto;margin:-21px 0 0 -44px;padding:25px 0 0 80px;background:url("https://www.thecssninja.com/demo/css_tree/toggle-small.png") no-repeat 40px 5px;} li input:checked + ol > li{display:block;margin:0 0 0.063em;} li input:checked + ol > li:first-child{margin:0 0 0.125em;} 

 <ol class="tree"> <li> <label for="menu-1">menu-1</label> <input type="checkbox" checked id="menu-1" /> <ol> <li> <label for="menu-1-1">menu-1-1</label> <input type="checkbox" id="menu-1-1" /> <ol> <li> <label for="menu-1-1-1">menu-1-1-1</label> <input type="checkbox" id="menu-1-1-1" /> <ol> <li> <label for="menu-1-1-1-1">menu-1-1-1-1</label> <input type="checkbox" id="menu-1-1-1-1" /> <ol> <li class="file"><a href="">menu-1-1-1-1-1</a></li> <li class="file"><a href="">menu-1-1-1-1-2</a></li> <li class="file"><a href="">menu-1-1-1-1-3</a></li> </ol> </li> <li class="file"><a href="">menu-1-1-1-2</a></li> <li class="file"><a href="">menu-1-1-1-3</a></li> <li class="file"><a href="">menu-1-1-1-4</a></li> <li class="file"><a href="">menu-1-1-1-5</a></li> <li class="file"><a href="">menu-1-1-1-6</a></li> </ol> </li> <li class="file"><a href="">menu-1-1-2</a></li> <li class="file"><a href="">menu-1-1-3</a></li> <li class="file"><a href="">menu-1-1-4</a></li> </ol> </li> <li class="file"><a href="">menu-1-2</a></li> <li class="file"><a href="">menu-1-3</a></li> </ol> </li> <li> <label for="menu-2">menu-2</label> <input type="checkbox" id="menu-2" /> <ol> <li> <label for="menu-2-1">menu-2-1</label> <input type="checkbox" id="menu-2-1" /> <ol> <li> <label for="menu-2-1-1">menu-2-1-1</label> <input type="checkbox" id="menu-2-1-1" /> <ol> <li class="file"><a href="">menu-2-1-1-1</a></li> <li class="file"><a href="">menu-2-1-1-2</a></li> <li class="file"><a href="">menu-2-1-1-3</a></li> <li class="file"><a href="">menu-2-1-1-4</a></li> <li class="file"><a href="">menu-2-1-1-5</a></li> </ol> </li> <li class="file"><a href="">menu-2-1-2</a></li> <li class="file"><a href="">menu-2-1-3</a></li> <li class="file"><a href="">menu-2-1-4</a></li> </ol> </li> <li class="file"><a href="">menu-2-2</a></li> <li class="file"><a href="">menu-2-3</a></li> </ol> </li> <li> <label for="menu-3">menu-3</label> <input type="checkbox" id="menu-3" /> <ol> <li> <label for="menu-3-1">menu-3-1</label> <input type="checkbox" id="menu-3-1" /> <ol> <li> <label for="menu-3-1-1">menu-3-1-1</label> <input type="checkbox" id="menu-3-1-1" /> <ol> <li class="file"><a href="">menu-3-1-1-1</a></li> <li class="file"><a href="">menu-3-1-1-2</a></li> <li class="file"><a href="">menu-3-1-1-3</a></li> <li class="file"><a href="">menu-3-1-1-4</a></li> <li class="file"><a href="">menu-3-1-1-5</a></li> </ol> </li> <li class="file"><a href="">menu-3-1-2</a></li> <li class="file"><a href="">menu-3-1-3</a></li> <li class="file"><a href="">menu-3-1-4</a></li> </ol> </li> <li class="file"><a href="">menu-3-2</a></li> <li class="file"><a href="">menu-3-3</a></li> </ol> </li> <li> <label for="menu-4">menu-4</label> <input type="checkbox" id="menu-4" /> <ol> <li> <label for="menu-4-1">menu-4-1</label> <input type="checkbox" id="menu-4-1" /> <ol> <li> <label for="menu-4-1-1">menu-4-1-1</label> <input type="checkbox" id="menu-4-1-1" /> <ol> <li class="file"><a href="">menu-4-1-1-1</a></li> <li class="file"><a href="">menu-4-1-1-2</a></li> <li class="file"><a href="">menu-4-1-1-3</a></li> <li class="file"><a href="">menu-4-1-1-4</a></li> <li class="file"><a href="">menu-4-1-1-5</a></li> </ol> </li> <li class="file"><a href="">menu-4-1-2</a></li> <li class="file"><a href="">menu-4-1-3</a></li> <li class="file"><a href="">menu-4-1-4</a></li> </ol> </li> <li class="file"><a href="">menu-4-2</a></li> <li class="file"><a href="">menu-4-3</a></li> </ol> </li> <li> <label for="menu-5">menu-5</label> <input type="checkbox" id="menu-5" /> <ol> <li> <label for="menu-5-1">menu-5-1</label> <input type="checkbox" id="menu-5-1" /> <ol> <li> <label for="menu-5-1-1">menu-5-1-1</label> <input type="checkbox" id="menu-5-1-1" /> <ol> <li class="file"><a href="">menu-5-1-1-1</a></li> <li class="file"><a href="">menu-5-1-1-2</a></li> <li class="file"><a href="">menu-5-1-1-3</a></li> <li class="file"><a href="">menu-5-1-1-4</a></li> <li class="file"><a href="">menu-5-1-1-5</a></li> </ol> </li> <li class="file"><a href="">menu-5-1-2</a></li> <li class="file"><a href="">menu-5-1-3</a></li> <li class="file"><a href="">menu-5-1-4</a></li> </ol> </li> <li class="file"><a href="">menu-5-2</a></li> <li class="file"><a href="">menu-5-3</a></li> </ol> </li> </ol> 

剩下的工作就是您的风格设计。 希望对你有帮助

Answer 2

您可能想要为此使用UI框架（并构建大部分UI），这样可以节省大量时间，并确保它与跨浏览器兼容且稳定。 jQuery是当今的恕我直言，是一种低级的操作，为什么已经完成并测试了它呢？ 我仅将其用于自定义的特定案例。

Bootstrap确实很流行，并且包含一些组件，您只能从中获得所需的东西。 折叠是您需要的组件。

Answer 3

请检查代码段。 希望对您有帮助。

 $("#btnID").click(function(){ $("#myTabs").slideToggle(), $(this).toggleClass("active"), $("#myTabs li a").on("click",function(){ $("#myTabs").slideUp() $('#btnID').removeClass("active") }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav class="sub-nav"><button class="btn text-uppercase" id="btnID"><span>Alle websites</span></button> <ul id="myTabs" class="nav nav-tabs" role="tablist" style="display: none;"> <li class="active"><a href="#" role="unieke-tab" >EINZIGARTIGE WEBSEITEN</a></li> <li class=""><a href="#">WEBSHOPS</a></li> </ul> </nav> 

Answer 4

最简单的方法是仅使用CSS，利用同级选择器（ ~ ）和隐藏的单选元素！

 a { color: #223; text-decoration: none; } .sub-menu { display: block; max-height: 0; transition: max-height 0.3s; overflow: hidden; will-change: max-height; } input:checked ~ .sub-menu { max-height: 100px; } 

 Side menu: <ul> <li> <label for="parent1">Parent link 1</label> <input type="radio" id="parent1" hidden name="sub-menu-trigger"> <ul class="sub-menu"> <li><a href="#">Sub item 1</a></li> <li><a href="#">Sub item 2</a></li> <li><a href="#">Sub item 3</a></li> </ul> </li> <li> <label for="parent2">Parent link 2</label> <input type="radio" id="parent2" hidden name="sub-menu-trigger"> <ul class="sub-menu"> <li><a href="#">Sub item 1</a></li> <li><a href="#">Sub item 2</a></li> <li><a href="#">Sub item 3</a></li> <li><a href="#">Sub item 4</a></li> <li><a href="#">Sub item 5</a></li> </ul> </li> </ul>