0
我想创建平滑的下拉菜单。这个想法是：当点击橙色元素时，它将切换黑色元素，并且当点击黑色元素时，它将切换灰色元素。但是我得到的是黑色元素覆盖橙色元素与灰色元素已经切换。我使用display:none;无处不在，以确保它不会显示出来。点击橙色元素后，所有内容都会切换。使用.hide()也不希望帮助隐藏这些元素。我怎样才能让这个黑盒子（在click事件之后）切换到橙色元素之下并且不显示灰色？此外，我不知道如何使灰色元素不会隐藏，当有人点击它。带扩展列表的菜单下拉菜单
$(".d").click(function(){
$(".d ul li").slideToggle(200);
});
$(".a").click(function(){
$(".b").slideToggle(200);
});#container
{
width: 200px;
height: 500px;
background-color: rgba(0, 0, 0, 0.3);
overflow-y: scroll;
overflow-x: hidden;
}
ul
{
list-style-type: none;
margin: 0;
padding: 0;
}
.a, .c
{
position: relative;
display: none;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: black;
cursor: pointer;
}
.b
{
position: relative;
display: none;
margin-bottom: 5px;
padding: 0;
height: 100px;
width: 200px;
background-color: rgba(0, 0, 0, 0.6);
}
.d, .e
{
font-size: 20px;
position: relative;
width: 200px;
height: 100px;
margin-bottom: 10px;
background-color: orange;
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<div id="container">
<ul>
<li class="d">1
<ul>
<li class="a"></li>
<ul>
<li class="b"></li>
<li class="b"></li>
<li class="b"></li>
</ul>
<li class="c"></li>
<li class="c"></li>
</ul>
</li>
<li class="d">2</li>
</ul>
</div>