javascript - 滚动迷你菜单

Question

我有这个菜单，我想要的是在 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>

Answer 1

只需在 #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>