Bootstrap覆盖菜单更改拖动按钮?
问题描述:
好的,我在Bootstrap中制作了一个覆盖菜单。问题是,当模态打开时,我试图用.ion-close
替换.ion-drag
类,并且在模态关闭时让它回到.ion-drag
。我如何在jQuery中做到这一点?互联网上的每种解决方案目前都无法解决。Bootstrap覆盖菜单更改拖动按钮?
答
试试这个,只保留.ion-drag
开模
$('.boxed a').toggleClass('ion-drag is-closed')
答
在<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>
您的网站没有加载jquery(根据我的控制台)。它正在寻找的资源是https://cdn.shopify.com/s/shopify/jquery.js –
@RobWelan固定 –
你仍然收到控制台错误($未定义)。根据你的页面源,你的自定义代码在jquery本身之前加载, 这就是出现控制台错误的原因。您需要将jquery.js?106 ...脚本加载到jquery.min.js脚本之后 - >这里是当前的源代码... –