我想制作这样的垂直菜单（参见图片以供参考

Question

我想创建一个垂直下拉菜单。我正在使用 Bootstrap 中的列表组和列表组项目类。任何人都可以帮助我，我如何通过单击一个项目来打开子菜单，并且它应该在具有黑色边框的同一个 div 中打开。有人可以帮助我，我该怎么做？

My menu

I want this menu

这是我的 HTML 和 CSS 代码。

HTML

    import React, { Component } from 'react';

function PostAdForm() {
    return (
        <div className="container postAd-container text-center">
            <h6 className="text-left p-3">CHOOSE A CATEGORY</h6>
            <ul className="list-group w-50">
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Mobiles
    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>
                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Vehciles
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>
                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Property for Sale
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Property for Rent
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Electronics & Home Appliances
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Bikes
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Business, Industrial & Agriculture
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Services
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Jobs
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Animals
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Furniture & Home Decor
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Fashion & Beauty
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Books, Sports & Hobbies
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
                <li className="list-group-item d-flex justify-content-between align-items-center">
                    Kids
                    <span className="badge badge-pill">
                        <i class="fas fa-chevron-right"></i>
                    </span>                </li>
            </ul>
        </div>
    );
}

export default PostAdForm;

CSS

.postAd-container {
  padding: 0 !important;
  border: 1px solid #6c757d;
  width: 70% !important;
}

.list-group {}
.list-group-item {
  color: #6c757d !important;
  font-weight: 600;
  cursor: pointer;
}
.list-group .list-group-item:hover {
  background-color: rgba(0,47,52,.2) !important;
  color: #000 !important;
}



.fa-chevron-right {
  font-size: 20px !important;
  color: #6c757d !important;
}

Answer 1

需要考虑两件事。

#1 为图标使用 FA 库。 （我为演示添加了我自己的 CDN 托管 sn-p）

#2 使用jQuery控制滑块的开闭。

我构建了一个原始演示供您使用，然后使用 cmets 在您自己的案例研究中实施

$('.primary-i').click(function() {
  $('.secondary').toggleClass('open'); //this adds the class .open or removes it if its already there (thus closing and opening the .secondary class element by reducing its width back to 0 or augmenting it to 180px //
  });

nav {
  position:relative;
}

.primary-i {
  cursor:pointer;
}

.primary, .secondary {
  width:180px;
}

.primary-i, .secondary-i {
  display:flex;border:1px solid black;
  padding:4px;width:150px;
}

.primary-i i:nth-child(1), .secondary-i i:nth-child(1) {
  margin-right:10px;
}

.primary-i i:nth-child(3),  .secondary-i i:nth-child(3) {
  margin-left:70px;
}
  

.secondary {
  width:0!important;overflow-x:hidden;
}.secondary.open {
  width:180px!important;transition:0.5s ease;
}

.secondary {
  position:absolute;top:0;left:158px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-9ZfPnbegQSumzaE7mks2IYgHoayLtuto3AS6ieArECeaR8nCfliJVuLh/GaQ1gyM" crossorigin="anonymous">


<nav>
  <div class="primary">
    <div class="primary-i">
      <i class="fa fa-shopping-cart"></i><span>Item</span>
      <i class="fa fa-angle-right"></i>
    </div>
    <div class="primary-i">
      <i class="fa fa-shopping-cart"></i><span>Item</span><i class="fa fa-angle-right"></i>
    </div>
    <div class="primary-i">
      <i class="fa fa-shopping-cart"></i><span>Item</span><i class="fa fa-angle-right"></i>
    </div>
      <div class="secondary">
        <div class="secondary-i">
      <i class="fa fa-shopping-cart"></i><span>Item</span>
      </div>
        <div class="secondary-i">
      <i class="fa fa-shopping-cart"></i><span>Item</span>
      </div>
    </div>
  </div>
</nav>

要玩的 Codepen：https://codepen.io/thewhitegrizzzzli/pen/qBNNNgG