Как создать раскрывающийся список внутри раскрывающегося списка с помощью начальной загрузки

Question

Я хочу создать раскрывающийся список, но я не уверен, что это раскрывающийся список или что-то еще, потому что я новичок в среде HTML.

Я хочу создать

Когда я нажимал на индийские специи, в нем должен отображаться еще один выпадающий список, а если я нажимал на перец, в нем должны отображаться еще два элемента.

Здесь каждый параметр должен указываться в качестве родительского. И раскрывающийся список не должен иметь границ вокруг него. Мне нужно создать раскрывающийся список так же, как на изображении. (Без каких-либо границ)

Я пробовал кое-что здесь, но я знаю, что это неправильный способ дизайна. https://stackblitz.com/edit/angular-a1deda?file=app%2Fapp.component.html

Здесь я почти рядом с моей целью

https://stackblitz.com/edit/angular-tjndwi?file=app%2Fapp.component.html

Может ли кто-нибудь помочь мне решить эту проблему ...

Answer 1

Я думаю, это то, что вы искали. Вы можете сделать остальную часть проектирования самостоятельно. Проверьте фрагмент.

$(document).ready(function () {
  $('#head__top').on('click', function(){
    if($('#innerCollapse').is(':visible')) {
      $('#innerCollapse').hide();
    }
  });
  $('#head__sub').on('click', function() {
     $('#innerCollapse').fadeToggle(300);
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-sm-12">
  <h4 id="head__top">
    <a class="font-weight-normal badge badge-light bg-white" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Indian Spices</a>
    <span class="col-sm-3"></span>
    <span class="col-sm-3"></span>
    <i class="fa fa-angle-down text-fade" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" style="font-size:18px"></i>
  </h4>
  <div class="collapse" id="collapseExample">
    <h6 id="head__sub">
    <a class="dropdown-item" role="button" aria-expanded="false"
		 aria-controls="innerCollapse">Pepper
    <span class="col-sm-3"></span>
    <span class="col-sm-3"></span>

    <i class="fa fa-angle-down" aria-hidden="true" data-toggle="collapse" href="#innerCollapse" role="button" aria-expanded="false"
		 aria-controls="innerCollapse" style="font-size:18px"></i></a>
     </h6>

  </div>

  <div class="collapse col-sm-3" id="innerCollapse">
    <h6>
      <a class="dropdown-item">Black Pepper</a>
      <a class="dropdown-item">White Pepper</a>
    </h6>
  </div>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>