文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何创建可切换侧栏的按钮？

问如何创建可切换侧栏的按钮？
EN

Stack Overflow用户
提问于 2022-08-25 09:24:00
回答 3查看 69关注 0票数 -1

我想要创建一个按钮，可以切换边栏，但我不知道如何做，我已经创建了侧边栏和按钮，我应该做什么帮助！

​

代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
        <div class="dropdown-menu bg-transparent border-0">
          <a href="#" class="dropdown-item">A</a>
          <a href="#" class="dropdown-item">B</a>
          <a href="#" class="dropdown-item">C</a>
        </div>
      </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>

​

javascript
html
css
bootstrap-5
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2022-08-25 09:52:42

​

代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="nav-item dropdown">
        <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown"><i class="fa fa-laptop me-2"></i>Admin</a>
        <div class="dropdown-menu bg-transparent border-0">
          <a href="#" class="dropdown-item">A</a>
          <a href="#" class="dropdown-item">B</a>
          <a href="#" class="dropdown-item">C</a>
        </div>
      </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
<script>
  document.querySelector('#menu-toggle').onclick=e=>{
    var sidebar=document.querySelector('#sidebar');
    if(sidebar.style.display!=='none')
      sidebar.style.display='none';
    else
      sidebar.style.display='block';
  }
</script>

​

对于您的示例，在html末尾添加这个脚本标记

代码语言：javascript
复制
<script>
  document.querySelector('#menu-toggle').onclick=e=>{
    var sidebar=document.querySelector('#sidebar');
    if(sidebar.style.display!=='none')
      sidebar.style.display='none';
    else
      sidebar.style.display='block';
  }
</script>

编辑:我的错，有一个错误，再试一次。

票数 0
EN

Stack Overflow用户

发布于 2022-08-25 10:09:07

您需要添加popper库和引导5.2库来处理javascript，以及引导文档，我在run按钮中添加了更多细节。我希望这能帮到你

代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js" integrity="sha512-8Y8eGK92dzouwpROIppwr+0kPauu0qqtnzZZNEF8Pat5tuRNJxJXCkbQfJ0HlUG3y1HB3z18CSKmUo7i2zcPpg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

您的代码也可以修改它，您也可以更改按钮以保持组成设计。

代码语言：javascript
复制
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<header class="header row ">
  <div class="d-flex justify-content-between">
    <div id="logo" class="pb-2 ps-2 pe-0 col-2">
      <img class="float-start py-2 ps-2 pe-2" src="assets/img/unknown.png">
      <a href="#" class="sidebar-toggler flex-shrink-0" id="menu-toggle">
        <i class="fa-solid fa-angle-left py-4 pe-2"></i>
      </a>
    </div>
  </div>
</header>
<div class="body row ">
  <div class="sidebar col-2 " id="sidebar">
    <!--sidebar start-->
    <div class="navbar-nav w-100">
      <div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button"id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
      Admin
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
      <li><a class="dropdown-item" href="#">A</a></li>
      <li><a class="dropdown-item" href="#">B action</a></li>
      <li><a class="dropdown-item" href="#">C</a></li>
    </ul>
  </div>
      <a href="#" class="nav-item nav-link"><i class="fa fa-th me-2"></i>Cập nhật PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-keyboard me-2"></i>Phân loại PO</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-chart-bar me-2"></i>Ước tính rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Cập nhật rebate</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Báo cáo</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Tra cứu thông tin</a>
      <a href="#" class="nav-item nav-link"><i class="fa fa-tachometer-alt me-2"></i>Hướng dẫn sử dụng</a>
    </div>
    <!--sidebar end-->
  </div>
  <div class="content col-10"> Content
  </div>
</div>
<script src="https://kit.fontawesome.com/60bf89e922.js" crossorigin="anonymous"></script>
<script>
  document.querySelector('#menu-toggle').onclick=e=>{
    var sidebar=document.querySelector('#sidebar');
    if(sidebar.style.display!=='none')
      sidebar.style.display='none';
    else
      sidebar.style.display='block';
  }
</script>

​

票数 0
EN

Stack Overflow用户

发布于 2022-08-25 09:40:05

也许你可以试试.offcanvas的引导

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

https://stackoverflow.com/questions/73485062

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

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

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

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

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