我正在尝试构建一个侧边栏导航，其中列出了类别。 有一个按钮可以在点击时扩展特定类别的子类别。 我没有这样做。为此，我使用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>
这是我想要的build。在扩展this。 我的问题是，它可以用css发生吗？如果是，那怎么样？ 如果有人有相同的参考，那么请提供该网站的网址。谢谢！
答案 0 :(得分：0)
如果你想用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>
其余的工作是你的风格设计。我希望你觉得它很有用
答案 1 :(得分：0)
您可能希望使用UI框架（并构建大部分UI），您将节省大量时间并确保其跨浏览器兼容且稳定。 jQuery现在是恕我直言的低级操作，为什么它已经完成并经过测试？我只将它用于自定义的特定情况。
Bootstrap非常受欢迎，并且只有您可以从中获得所需的组件。折叠是您需要的组件。
答案 2 :(得分：0)
请检查代码段。希望它对你有所帮助。
$("#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>
答案 3 :(得分：0)
实现这一目标的最简单方法是只使用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>