滚动迷你菜单

Question

我有这个菜单，我想要的是＆＃34;隐藏＆＃34;当a类或b类长度大于整个容器时，它是元素。我想像facebook一样有类似的效果：我怎样才能达到这个效果？我正在思考评论部分中的一种方式，但我不知道接下来会发生什么。

＆＃13;

＆＃13;

$('.b').hide();
     $(".a").click(function(){
        $(".b").slideToggle(200);
    });

/*
$(document).ready(function(){ 
   
    var k = $("#container").length;
	var n = $(".a").length;
    
    
	if (n > k) {
		
	} 
	else {

	}

});
*/

＆＃13;

#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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只需在overflow-y: scroll;上添加#container即可玩，直到它看起来像你想要的样子。这是一个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>