带有扩展列表的菜单下拉菜单

Question

我想创建平滑的下拉菜单。 这个想法是：单击橙色元素将切换黑色元素，单击黑色元素将切换灰色元素。 但是我得到的是黑色元素覆盖了橙色元素，而灰色元素已经切换。 我用过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> 

Answer 1

页面已经翻过来，因此它不能向下滚动，因此您应该添加元素，并且还可以在元素内部使用href =“＃id / .classname”进行隐藏，然后对于外观页面，可以完成$（document）.ready （function（）{$（“。a”）。hide（）; $（“。b”）。hide（）; $（“。d”）。click（function（）{$（“。d”） .fadeIn（'fast'）;}）;

$(".a").click(function(){
        $(".b").fadeIn('fast');
    });