引导覆盖菜单更改拖动按钮？答案

【问题标题】：Bootstrap Overlay Menu Change Drag Button?引导覆盖菜单更改拖动按钮？
【发布时间】：2017-08-03 05:44:29
【问题描述】：

好的，所以我在 Bootstrap 中做了一个覆盖菜单。问题是，当模式打开时，我试图用.ion-close 替换.ion-drag 类，并在模式关闭时让它回到.ion-drag。我如何在 jQuery 中做到这一点？到目前为止，互联网上的每个解决方案都不起作用。

我的网站：https://filthdemo.myshopify.com

【问题讨论】：

您的网站没有加载 jquery（根据我的控制台）。它正在寻找的资源是cdn.shopify.com/s/shopify/jquery.js
@RobWelan 已修复
您仍然遇到控制台错误（$ 未定义）。根据您页面的来源，您的自定义代码在 jquery 本身之前加载，这就是出现该控制台错误的原因。你需要你的 jquery.js?106... 脚本在 jquery.min.js 脚本之后加载 -> 这是当前的源顺序...
@RobWelan 好的，现在应该可以了...

标签： javascript jquery css twitter-bootstrap shopify

【解决方案1】：

试试这个，在打开模态之前只保留.ion-drag

$('.boxed a').toggleClass('ion-drag is-closed')

【讨论】：

【解决方案2】：

在<head>中添加这些行

<!-- Scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script>
  $('#toggle').click(function() {
  $(this).toggleClass('toggle-active');
  $('#overlay').toggleClass('nav-active');
  });
</script>

并将您的 <header> 更改为

<header>
    <div class="navbar-header">
        <div class="toggle-button" id="toggle">
            <span class="bar top"></span>
            <span class="bar middle"></span>
            <span class="bar bottom"></span>
        </div>
    </div>
    <nav class="overlay" id="overlay">
        <ul>
            <li><a href="#">Our Story</a></li>
            <li><a href="#">Events</a></li>
            <li><a href="#">Information</a></li>
            <li><a href="#">ARTICLES</a></li>
            <li><a href="#">HELP</a></li>
        </ul>
    </nav>
</header>

【讨论】：