如何在加载前清除列表-Bootstrap 4

【问题标题】：How to clear list before loading-Bootstarp 4如何在加载前清除列表-Bootstrap 4
【发布时间】：2020-11-06 11:53:23
【问题描述】：

我创建了如下列表组：

 
   <html lang="en">
   <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
   
    <title>test</title>

    <!--bootstrap scripts-->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <!--end bootsripts-->
     </head>
     
  <body>
    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#s">Default</button>



          <div class="modal" tabindex="-1" role="dialog" id="s"> 
               <div class="modal-dialog modal-lg modal-dialog-scrollable" >
                <div class="modal-content">
                  <div class="modal-body">
                   
                   
                    <div class="row">
                    
                       <div class="col-6 col-sm-6 col-xl-6">
                          <h5 class="text-danger">Main Catagories</h5>    
                        <div class="list-group"style="width:100px;border:none">
          
                        <a href="#vehical" class="list-group-item list-group-flush border-bottom"  data-toggle="collapse" style="text-decoration:none">Vehical</a>
                         <a href="#property" class="list-group-item list-group-flush border-bottom" data-toggle="collapse" style="text-decoration:none">Property</a>                                                                                      
                          </div>
                         </div>

                               <div class="col-6">
                               
              <div class="list-group list-group-flush" style="width:100px;border:none" >

             <div class="list-group collapsing" id="vehical" data-toggle="collapse" style="width:100px;border:none" >
               <a href="#" class="list-group-item list-group-item-action">Vehical1</a>
               <a href="#" class="list-group-item list-group-item-action">Vehical2</a>
               <a href="#" class="list-group-item list-group-item-action">Vehical3</a>
               <a href="#" class="list-group-item list-group-item-action">Vehical4</a>
               <a href="#" class="list-group-item list-group-item-action">Vehical5</a>
               </div>

                            
            <div class="list-group collapsing" id="property" data-toggle="collapse" style="width:100px;border:none"> 

                <a href="#" class="list-group-item list-group-item-action">Property1</a>
                <a href="#" class="list-group-item list-group-item-action">Property2</a>
                <a href="#" class="list-group-item list-group-item-action">Property3</a>
                <a href="#" class="list-group-item list-group-item-action">Property4</a>
                <a href="#" class="list-group-item list-group-item-action">Property5</a>
                  </div>

                    </div>
                    
                      </div>

                          </div>
                   </div>
                   </div>
                      
                      

                          </div>
                          
          <!--Java Scripts-->
           <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
          <!--end of java scripts-->
                          </body>
                          
                          </html>

单击主类别时，子类别将显示在下一列。但显示为enter image description here

当我单击新的主类别按钮时我需要，它在右侧面板中显示与主类别相关的子类别。但是，当单击另一个主类别按钮之后，两个子类别都显示在右侧面板中，但我只想显示子类别与之相关的项目是点击主类别。我使用bootstrap 4版本

【问题讨论】：

  • 您好，请说明您要做什么，这是预期结果和您使用的版本。谢谢

标签： javascript twitter-bootstrap bootstrap-4


【解决方案1】：

回答晚了，但我认为这对面临同样问题的其他人会有所帮助。 实际上，您缺少在列表组上执行制表符所需的一些属性。检查下面的代码 sn-p 了解一下。

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <title>test</title>

    <!--bootstrap scripts-->
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous"
    />
    <!--end bootsripts-->
  </head>

  <body>
    <button
      type="button"
      class="btn btn-default"
      data-toggle="modal"
      data-target="#s"
    >
      Default
    </button>

    <div class="modal" tabindex="-1" role="dialog" id="s">
      <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
          <div class="modal-body">
            <div class="row">
              <div class="col-4 col-sm-4 col-xl-4">
                <h5 class="text-danger">Main Catagories</h5>
                <div class="list-group" style="width: 100px; border: none">
                  <a
                    class="list-group-item list-group-item-action active"
                    id="list-vehicle-list"
                    data-toggle="list"
                    href="#list-vehicle"
                    role="tab"
                    aria-controls="vehicle"
                    >Vehicle</a
                  >
                  <a
                    class="list-group-item list-group-item-action"
                    id="list-property-list"
                    data-toggle="list"
                    href="#list-property"
                    role="tab"
                    aria-controls="property"
                    >Property</a
                  >
                </div>
              </div>
              <div class="col-8">
                <div class="tab-content" id="nav-tabContent">
                  <div
                    class="tab-pane fade show active"
                    id="list-vehicle"
                    role="tabpanel"
                    aria-labelledby="list-vehicle-list"
                  >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Vehical1</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Vehical2</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Vehical3</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Vehical4</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Vehical5</a
                    >
                  </div>
                  <div
                    class="tab-pane fade"
                    id="list-property"
                    role="tabpanel"
                    aria-labelledby="list-property-list"
                  >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Property1</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Property2</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Property3</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Property4</a
                    >
                    <a href="#" class="list-group-item list-group-item-action"
                      >Property5</a
                    >
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Java Scripts-->
    <script
      src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
      integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
      integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
      crossorigin="anonymous"
    ></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
      integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
      crossorigin="anonymous"
    ></script>
    <!--end of java scripts-->
  </body>
</html>

【讨论】：

    猜你喜欢
    • 2015-05-17
    • 2014-04-22
    • 1970-01-01
    • 2018-11-03
    • 2018-05-22
    • 2023-03-03
    • 1970-01-01
    • 2011-12-09
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode