小编Fra*_*Doe的帖子

侧边栏默认在桌面上打开,在移动设备上关闭

我在尝试使侧边栏/导航内容(使用Bootstrap)在桌面上默认显示(展开)并在移动设备上默认关闭(仅在移动设备上显示)时遇到了一些实际麻烦。我似乎无法使它正常工作。

<nav class="menu menu-open" id="theMenu">
      <div class="menu-wrap">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <i class="fa fa-bars menu-close d-lg-none" id="menu-toggle"></i>
            </button>
          <div id="menu-logo">
            <img src="Final_Logo.png" width="210" height="214" alt="">
          </div>
          <div id="navbarToggleExternalContent">
          <ul id="main-menu">
              <a href="#">Home</a>
              <a href="#">About</a>
              <a href="#">Writing</a>
              <a href="#">Events</a>
              <a href="#">Speaking</a>
              <a href="#">Music</a>
          </ul>
          <ul id="social-icons">
              <li class="facebook"><a href="#"><i class="fab fa-facebook fa-2x"></i></a></li>
              <li class="twitter"><a href="#"><i class="fab fa-twitter fa-2x"></i></a></li>
              <li class="instagram"><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
          </ul>
        </div>
      </div>
  </nav>
Run Code Online (Sandbox Code Playgroud)

我尝试使用此javascript代码,但无济于事:

 $('.menu-close').on('click', function(){
    $('#menuToggle').toggleClass('active');
    $('body').toggleClass('body-push-toright');
    $('#theMenu').toggleClass('menu-open');
    alert("Test");
    });
Run Code Online (Sandbox Code Playgroud)

html javascript css responsive-design bootstrap-4

9
推荐指数
2
解决办法
192
查看次数

标签 统计

bootstrap-4 ×1

css ×1

html ×1

javascript ×1

responsive-design ×1