文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在显示新div之前折叠以前的div。

问在显示新div之前折叠以前的div。
EN

Stack Overflow用户
提问于 2021-09-03 17:44:53
回答 1查看 41关注 0票数 2

这是INGROW页面的UI。

​

​

1)用户首先单击列表图标。一个实际折叠的菜单将显示在屏幕上。

2)现在，用户将选择一个类别。

3)根据用户选择，实际折叠的div将出现并显示所有项。

4)但当使用者选择健康和个人护理时，家庭和厨房就会崩溃。

所以我的问题是如何一次只显示一个类别。它可能会发生，用户点击所有的菜单选项，他们将显示在屏幕上，但我不想那样。我想一次只显示一个类别。

​

第二个问题是标志形象的问题。当我在vs代码中运行这段代码并使用实时服务器时，它运行得很好，但我是从外部运行的(只需单击.html页面)，它就不会显示(因特网就在那里)。

​

代码语言：javascript
复制
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online Shopping With INGROSH</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="border" >
        <div class="w-100 h-25 row" >
      <div class="col-5" >
      <button class="btn-icn btn-outline-dark btn-sm ms-2 mt-2 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#menuCollapse" aria-expanded="false" aria-controls="menuCollapse"><span class="material-icons">list</span></button>
      <img src="/img/ingrow_logo_2.png" alt="ingrow-logo" class="ingrow-logo ms-4"/>
      </div>
      <div class="col-4">
      <input type="search" placeholder="search" class="search-bar mt-1" />
      </div>
      <div class="col-3 text-end">
      <button class="btn-icn btn-outline-dark mt-2 me-3"><span class="material-icons"> shopping_cart </span></button>
      <button class="btn-icn btn-outline-dark btn-sm"><span class="material-icons"> person </span></button>
      </div>
      </div>
    </div>
    <div class="container-fluid border collapse collapsing" id="menuCollapse">
      <div class="row row-cols-3">
        <div class="col border p-0"> <button class="border-0 container-fluid  h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#homeKitchen" aria-expanded="false" aria-controls="homeKitchen">Home & Kitchen</button> </div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#hlthPrsnlCare" aria-expanded="false" aria-controls="hlthPrsnlCare">Health & Personal Care</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Processed Food</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Staples & Grocery</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Beverage & Confectionary</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Dairy, Frozen & Bakery</button></div>
      </div>
    </div>
    <div class="collapse" id="homeKitchen">
       <h1 class="mt-1 text-center h1">Home & Kitchen</h1>
       
    </div>
    <div class="collapse" id="hlthPrsnlCare">
      <h1 class="mt-1 text-center h1">Health & Personal Care</h1>
      
   </div>
   <div class="collapse" id="">
    <h1 class="mt-1 text-center h1"></h1>
    
 </div>
 <div class="collapse" id="">
  <h1 class="mt-1 text-center h1"></h1>
  
</div>
<div class="collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
<div class="collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
  </body>
</html>

​

javascript
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-09-03 18:14:16

只需在button单击时隐藏另一个。请注意，我添加了另一个类.item以将其与其他.collapse区分开来。

​

代码语言：javascript
复制
$(".btn").click(function(){
    $('.collapse.item').collapse('hide');
});
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Online Shopping With INGROSH</title>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
      crossorigin="anonymous"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="border" >
        <div class="w-100 h-25 row" >
      <div class="col-5" >
      <button class="btn-icn btn-outline-dark btn-sm ms-2 mt-2 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#menuCollapse" aria-expanded="false" aria-controls="menuCollapse"><span class="material-icons">list</span></button>
      <img src="/img/ingrow_logo_2.png" alt="ingrow-logo" class="ingrow-logo ms-4"/>
      </div>
      <div class="col-4">
      <input type="search" placeholder="search" class="search-bar mt-1" />
      </div>
      <div class="col-3 text-end">
      <button class="btn-icn btn-outline-dark mt-2 me-3"><span class="material-icons"> shopping_cart </span></button>
      <button class="btn-icn btn-outline-dark btn-sm"><span class="material-icons"> person </span></button>
      </div>
      </div>
    </div>
    <div class="container-fluid border collapse collapsing" id="menuCollapse">
      <div class="row row-cols-3">
        <div class="col border p-0"> <button class="border-0 container-fluid  h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#homeKitchen" aria-expanded="false" aria-controls="homeKitchen">Home & Kitchen</button> </div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" type="button" data-bs-toggle="collapse" data-bs-target="#hlthPrsnlCare" aria-expanded="false" aria-controls="hlthPrsnlCare">Health & Personal Care</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Processed Food</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Staples & Grocery</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Beverage & Confectionary</button></div>
        <div class="col border p-0"> <button class="border-0 container-fluid h-100 btn btn-dark fs-6" >Dairy, Frozen & Bakery</button></div>
      </div>
    </div>
    <div class="item collapse" id="homeKitchen">
       <h1 class="mt-1 text-center h1">Home & Kitchen</h1>
       
    </div>
    <div class="item collapse" id="hlthPrsnlCare">
      <h1 class="mt-1 text-center h1">Health & Personal Care</h1>
      
   </div>
   <div class="item collapse" id="">
    <h1 class="mt-1 text-center h1"></h1>
    
 </div>
 <div class="item collapse" id="">
  <h1 class="mt-1 text-center h1"></h1>
  
</div>
<div class="item collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
<div class="item collapse" id="">
  <h1 class="mt-1 text-center h1" id="home&kitchen"></h1>
  
</div>
  </body>
</html>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/69048836

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档