使用自定义汉堡包按钮使用jQuery触发MDBootstrap side-nav

Question

这工作正常:http: //jsfiddle.net/musicformellons/ef76gud7/

现在我想使用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');
    });
});

使用这个侧面导航(使用我自己的动画汉堡包,请参阅小提琴):http: //mdbootstrap.com/javascript/sidenav/

我可以通过将这些添加到我的汉堡包按钮来触发我的汉堡包侧面导航:data-activates ="slide-out"class ="button-collapse"

但后来我放松了动画,因为显然不再显示引导程序导航栏崩溃.

如何将我的汉堡包动画与新的侧面导航一起使用？可能引用的jQuery代码需要完全调整？!

因此需要以下操作:(1)从另一个CSS按钮触发MD bootstrap sidenav然后其默认值(2)汉堡包动画应与sidenav保持"同步".例如:只是使用切换它可能会松开同步,因为我之前有类似的经历:Bootstrap导航栏切换不与下拉菜单同步

你可以用这个小提琴作为起点:http: //jsfiddle.net/musicformellons/rto14vzp/2/

关于小提琴的评论:

• 忽略JS和CSS资源面板消息; 我尝试
  通过资源面板添加mdbootstrap,它不起作用,而目前的方法.
• 对mdbootstrap(通过CDN url)的引用是指mdbootstrap的免费部分(side-nav是免费包的一部分).

Answer 1

对您的问题最直接的回答是您需要将按钮动画和sideNav()打开触发器与一个 jQuery 语句链接在一起。如果你添加.nav-icon-line到你的跨度中，它看起来像这样：

  $("#nav-icon4, .nav-icon-line").click(function() {
    $("#nav-icon4").addClass('open');
    $(".button-collapse").sideNav();
  });

这里还有很多事情我无法真正了解，因为sideNav()您正在使用的框架无法免费提供其源代码。

其他需要考虑的事情：

您需要使用相同的方式重置汉堡包动画removeClass()。我不太确定这是如何工作的，因为它sideNav()是一个黑匣子。据我所知，sideNav()当您单击侧边栏外部时，似乎会隐藏侧边栏；找出哪个函数控制它并放入$("#nav-icon4").removeClass('open');该函数中。

Codepen 示例（尚未完全发挥作用，取决于弄清楚 内部发生了什么sideNav）。