javascript - Bootstrap 4 使用切换按钮连接侧面菜单(响应式)

Question

我正在尝试向网页添加一个侧边菜单，该菜单的响应类似于导航栏(不幸的是，我仍然在顶部有一个导航栏)。
在 https://jsfiddle.net/ralfavatar/crve8nxb/我发布了代码，如果您放大结果窗口的大小，您应该会在左侧(黄色)看到一个菜单，该菜单被隐藏到一定的屏幕尺寸 --> 很好。
但我想要一个切换按钮(如导航栏中的汉堡包按钮)，它向我显示这个菜单就像一个下拉菜单。
我没有找到任何提示，也不知道如何将带有菜单的切换按钮连接到现有菜单，或者，如果我希望使用此按钮切换现有菜单，我将不胜感激。
有人对此有想法吗？
这是代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Content -->
<section class="mainsection">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-1 col-sm-3" id="debug1">
        <nav class="nav nav-pills flex-column d-none d-lg-block">
          <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
          <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
          <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
          <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
        </nav>
      </div>
      <div class="col-xs-pull-12 col-sm-9" id="debug2">
        <div class="maincontent align-content-lg-center">
          <div class="tab-content">
            <div class="tab-pane active fade in" id="aboutme">
              Hallo 1
            </div>
            <div class="tab-pane active fade in" id="location">
              Hallo 2
            </div>
            <div class="tab-pane fade" id="products">
              Hallo 3
            </div>
            <div class="tab-pane fade" id="interestingthings">
              Hallo 4
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 1

使用切换(汉堡)按钮影响侧边栏黄色占位符的方法是简单地更改具有目标 ID(#debug1)的该按钮的 data-target html 属性。
这样，您可以将菜单移动到黄色区域的侧边栏并切换它。
在您的示例中，黄色区域将出现/消失，但您可以在其上构建菜单侧边栏。

<a href="index.html" class="navbar-brand">Moin</a>
  <button type="button" class="navbar-toggler ml-auto" 
     data-toggle="collapse" data-target="#debug1" aria-expanded="false" 
         aria-controls="navbarResponsive" aria-label="Toogle navigation">

更新 :
我已经从导航栏中添加(复制/粘贴)汉堡包按钮并将其放置在黄色部分和目标红色区域中，该区域应模拟下拉菜单。对 HTML 进行重新排序，您也可以将其放在黄色部分内。我希望这有帮助。

<!-- Content -->
<section class="mainsection">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1 col-sm-3" id="debug1">
                <button type="button" class="navbar-toggler ml-auto"
data-toggle="collapse" data-target="#debug2" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="navbar-toggler-icon"></span>
                </button>
                <nav class="nav nav-pills flex-column d-none d-lg-block">
                    <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
                    <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
                    <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
                    <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
                </nav>
            </div>
            <div class="col-xs-pull-12 col-sm-9" id="debug2">
                <div class="maincontent align-content-lg-center">
                    <div class="tab-content">
                        <div class="tab-pane active fade in" id="aboutme">
                            Hallo 1
                        </div>
                        <div class="tab-pane active fade in" id="location">
                            Hallo 2
                        </div>
                        <div class="tab-pane fade" id="products">
                            Hallo 3
                        </div>
                        <div class="tab-pane fade" id="interestingthings">
                            Hallo 4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

更新 2(我现在有针对性的侧边栏菜单与黄色部分侧边栏中的按钮切换):

<!-- Content -->
<section class="mainsection">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-1 col-sm-3">
                <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
        </button>
                <nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block" id="debug3">
                    <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
                    <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
                    <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
                    <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
                </nav>
            </div>
            <div class="col-xs-pull-12 col-sm-9" id="debug2">
                <div class="maincontent align-content-lg-center">
                    <div class="tab-content">
                        <div class="tab-pane active fade in" id="aboutme">
                            Hallo 1
                        </div>
                        <div class="tab-pane active fade in" id="location">
                            Hallo 2
                        </div>
                        <div class="tab-pane fade" id="products">
                            Hallo 3
                        </div>
                        <div class="tab-pane fade" id="interestingthings">
                            Hallo 4
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

更新 3:

<!-- Content -->
<section class="mainsection">
   <div class="container-fluid">
      <div class="row">
         <div class="col-xs-1 col-sm-3" style="background-color: #000">
            <button type="button" class="navbar-toggler ml-auto" data-toggle="collapse" data-target="#debug3" aria-expanded="false" aria-controls="navbarResponsive" aria-label="Toogle navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="navbar-toggler-icon"></span>
            </button>
         </div>
      </div>
      <div class="row">
         <div class="col-xs-1 col-sm-3" id="debug3">
            <nav class="nav navbar-collapse collapse nav-pills flex-column d-none d-lg-block">
               <a class="nav-item nav-link active" href="#aboutme" data-toggle="pill">Über mich</a>
               <a class="nav-item nav-link" href="#location" data-toggle="pill">Location</a>
               <a class="nav-item nav-link" href="#products" data-toggle="pill">Dinge</a>
               <a class="nav-item nav-link" href="#interestingthings" data-toggle="pill">Interessantes</a>
            </nav>
         </div>
         <div class="col-xs-pull-12 col-sm-9" id="debug2">
            <div class="maincontent align-content-lg-center">
               <div class="tab-content">
                  <div class="tab-pane active fade in" id="aboutme">
                     Hallo 1
                  </div>
                  <div class="tab-pane active fade in" id="location">
                     Hallo 2
                  </div>
                  <div class="tab-pane fade" id="products">
                     Hallo 3
                  </div>
                  <div class="tab-pane fade" id="interestingthings">
                     Hallo 4
                  </div>
               </div>
            </div>
         </div>
      </div>
   </div>
</section>