打开/关闭时更改 slicknav 中的标签答案

【问题标题】：Change labels in slicknav when open/closed打开/关闭时更改 slicknav 中的标签
【发布时间】：2014-12-07 13:46:49
【问题描述】：

我正在尝试更改 Slicknav 中打开和关闭 Slicknav 菜单时的标签。

In the jsfiddle, here.我已经使用标签关闭作为默认状态，而对于打开状态，我想要另一段文本。

正常状态如下：

$('#menu').slicknav({
    duplicate: false,
    label: 'label closed'
});

我尝试过使用 basic if this then that，但我觉得我只是在搞砸这段非常简单的 javascript。

任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery mobile menu slicknav

【解决方案1】：

在查看docs之后
像这样的东西应该可以解决问题。

var $label;
$('#menu').slicknav({
    duplicate: false,
    label: 'label closed',
    init: function() {
        $label = $(".slicknav_menutxt");
    },
    open: function() {
        $label.text("label open");
    },
    close: function() {
        $label.text("label closed");
    } 
});

还有jsfiddle的链接

【讨论】：

在我提供的示例中确实做到了。但是，我试图包含一个以使用不同的汉堡包图标。对于关闭的标签，我想使用关闭图标，你看到了吗？但是我似乎无法在 $label.text("label open"); 中包含类似的；感谢您的宝贵时间
插件添加了一些类slicknav_open和slicknav_collapsed你可以使用它们并从css更新图标
如果您想包含 html 而不是文本，请使用 html jQuery 方法而不是 text 之一。如果您只想更改图标，则可以仅根据我上面提到的打开/折叠类从 css 中执行此操作。
谢谢，我的工作方式不对。我现在得到了谢谢！我使用 @font-face 将 FontAwesome 包含到 css 中，并使用 :before 为 slicknav_open 和 slicknav_collapsed 类指定一个图标。

【解决方案2】：

您可以直接更改文本，因为它包含在类 slicknav_menutxt - Fiddle 的跨度中

$('#open').click(function (event) {
  event.preventDefault();
  $('#menu').slicknav('open');
  $(".slicknav_menutxt").text("label open");

});

$('#close').click(function (event) {
  event.preventDefault();
  $('#menu').slicknav('close');
  $(".slicknav_menutxt").text("label closed");

});

$('#toggle').click(function (event) {
  event.preventDefault();
  if ($(".slicknav_menutxt").text().indexOf("open") >= 0) {
    $(".slicknav_menutxt").text("label closed");
   } else {
    $(".slicknav_menutxt").text("label open");
  }
  $('#menu').slicknav('toggle');
});

【讨论】：

嗯，是的，这是一个很好的解决方案。但是，我正在尝试将它实现到“ $('#menu').slicknav({ ”函数，而不仅仅是在切换上。