我有这个菜单,我想要的是在 a 类或 b 类长度大于整个容器时“隐藏”它的元素。我想要类似 facebook 的效果:我怎样才能达到这种效果?我正在考虑评论部分的一种方式,但我不知道下一步是什么。
$('.b').hide();
$(".a").click(function(){
$(".b").slideToggle(200);
});
/*
$(document).ready(function(){
var k = $("#container").length;
var n = $(".a").length;
if (n > k) {
}
else {
}
});
*/
#container
{
width: 200px;
height: 500px;
background-color: rgba(0, 0, 0, 0.3);
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.a
{
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b
{
margin-bottom: 5px;
padding: 0;
list-style-type: none;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="a"></li>
<li class="a"></li>
</ul>
</div>
最佳答案
只需在 #container
上添加一个 overflow-y: scroll;
并尝试直到它看起来像您想要的样子。这是一个 fiddle .
CSS
#container {
width: 200px;
height: 500px;
overflow-y: scroll;
background-color: rgba(0, 0, 0, 0.3);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.a {
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b {
margin-bottom: 5px;
padding: 0;
list-style-type: none;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}
HTML
<div id="container">
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="a"></li>
<li class="a"></li>
</ul>
</div>
关于javascript - 滚动迷你菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31245987/