Css 是否有一种方法可以将画布关闭并打开，甚至改变菜单图标

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

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

---

我想用我自己的类替换“菜单图标”，但我不确定如何连接到close方法。我试着添加一个ng点击，但在关闭时不会触发，因为

标记用于覆盖页面的其余部分以实现关闭功能。基于此，我认为使用脱离画布将是最好的方法。

您可以这样做，连接到

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');
});

---

什么版本的基础？这有点难理解你的问题。您可以通过修改或重写Zurb基金会CSS来更改任何图标。您只需检查这些图标即可获得需要修改的类。对于modals、alerts等中使用的close框也是如此。如果您谈论的是关闭offcanvas的巨大操作，那么不清楚您为什么要修改它。如果您更新并澄清您的问题，我很乐意回答。我希望更改图标，以便在打开和关闭时直观地指示打开/关闭状态。总的来说，我正在寻找一种通过基金会来做到这一点的方法。如果框架不支持它，那么我就不支持它。修改打开-关闭状态可能必须通过标记触发的函数触发。