有没有一种方法可以连接到Foundation off-canvas关闭和打开，甚至更改菜单图标

Question

我正在使用angular-foundation，并试图找到一种在打开/关闭菜单时更改画布外菜单图标的方法。目前我使用的是：

<a class="right-off-canvas-toggle menu-icon"><span></span></a>

我想用我自己的类替换“菜单图标”，但我不确定如何连接到close方法。我尝试添加一个ng-click，但不会在close上触发，因为<a>标记用于覆盖close函数的页面的其余部分。基于此，我认为使用画布外将是最好的方法。

Answer 1

您可以连接到open.fndtn.offcanvas和close.fndtn.offcanvas事件来执行此操作，如下所示：

$(document).on('open.fndtn.offcanvas', '[data-offcanvas]', function() {
    var off_canvas_icon = $(this).find('.right-off-canvas-toggle');

    off_canvas_icon.removeClass('menu-icon').addClass('close-icon');
});

$(document).on('close.fndtn.offcanvas', '[data-offcanvas]', function() {
    var off_canvas_icon = $(this).find('.right-off-canvas-toggle');

    off_canvas_icon.removeClass('close-icon').addClass('menu-icon');
});