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>