[英]Trigger MDBootstrap side-nav with jQuery using custom hamburger button
This was working fine: http://jsfiddle.net/musicformellons/ef76gud7/ 这工作正常: http : //jsfiddle.net/musicformellons/ef76gud7/
Now I would like to use MDBootstrap instead of Bootstrap and so I have to alter this jQuery code: 现在我想使用MDBootstrap而不是Bootstrap,所以我必须改变这个jQuery代码:
$(document).ready(function () {
$('#navbar').on('show.bs.collapse', function () {
$('#nav-icon4').addClass('open');
});
$('#navbar').on('hide.bs.collapse', function () {
$('#nav-icon4').removeClass('open');
});
});
to work with this side-nav (using my own animated hamburger, see fiddle): http://mdbootstrap.com/javascript/sidenav/ 使用这个侧面导航(使用我自己的动画汉堡包,请参阅小提琴): http : //mdbootstrap.com/javascript/sidenav/
I can trigger the side-nav with my hamburger by adding these to my hamburger button: data-activates="slide-out" class="button-collapse" 我可以通过将这些添加到我的汉堡包按钮来触发我的汉堡包侧面导航:data-activates =“slide-out”class =“button-collapse”
But then I loose the animation, since obviously the bootstrap navbar collapse is no longer shown. 但后来我放松了动画,因为显然不再显示引导程序导航栏崩溃。
How can I have my hamburger animation together with the new side-nav? 如何将我的汉堡包动画与新的侧面导航一起使用? Probably the cited jQuery code needs to be adjusted completely?!
可能引用的jQuery代码需要完全调整?!
So following is needed: (1) trigger MD bootstrap sidenav from another CSS button then its default one (2) the hamburger animation should stay 'in sync' with the sidenav. 因此需要以下操作:(1)从另一个CSS按钮触发MD bootstrap sidenav然后其默认值(2)汉堡包动画应与sidenav保持“同步”。 For instance: just using toggle it would probably loose sync as I had similar experiences before: Bootstrap navbar toggle not in sync with dropdown menu
例如:只是使用切换它可能会松开同步,因为我之前有类似的经历: Bootstrap导航栏切换不与下拉菜单同步
You could use this fiddle as a starting point: http://jsfiddle.net/musicformellons/rto14vzp/2/ 你可以用这个小提琴作为起点: http : //jsfiddle.net/musicformellons/rto14vzp/2/
Comments regarding the fiddle: 关于小提琴的评论:
The most direct answer to your question is that you need to chain the button animation and sideNav()
opening triggers together with one jQuery statement. 您问题的最直接答案是您需要将按钮动画和
sideNav()
打开触发器与一个jQuery语句链接在一起。 If you add .nav-icon-line
to your spans, that would look like this: 如果将
.nav-icon-line
添加到跨度,则如下所示:
$("#nav-icon4, .nav-icon-line").click(function() {
$("#nav-icon4").addClass('open');
$(".button-collapse").sideNav();
});
There is a lot more going on here that I can't really get into because the source of sideNav()
isn't freely available with the framework you are using. 这里有很多我无法真正进入的地方因为
sideNav()
的来源不能随你使用的框架免费提供。
Something else to consider: 还需要考虑的事情:
You'd need to reset the hamburger animation in the same way by using removeClass()
. 您需要使用
removeClass()
以相同的方式重置汉堡包动画。 I'm not really sure how that would work because sideNav()
is a black box. 我不确定这是怎么回事,因为
sideNav()
是一个黑盒子。 From what I can see, sideNav()
seems to hide the sidebar when you click outside of it; 从我所看到的,当你点击侧边栏时,
sideNav()
似乎隐藏了侧边栏; figure out what function controls that and put $("#nav-icon4").removeClass('open');
找出什么函数控制并放置
$("#nav-icon4").removeClass('open');
into the function. 进入功能。
Codepen example (not fully functional yet, depends on figuing out what's happening inside of sideNav
). Codepen例子 (没有充分发挥作用还取决于figuing出发生了什么内部
sideNav
)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.