выпадающее меню с расширенным списком

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 = «# Идентификатор/.classname» внутри элемента для прятки то для просмотра страницы это можно сделать $ (document) .ready (function() { $ (". a"). hide(); $ (". b"). hide(); $ (" .d "). click (function() { $ (". d "). fadeIn ('fast'); });

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