Question

在按下按钮时，我无法弄清楚如何更改切换状态。我正在使用由CSS触发的SVG图标，它们在我的查询脚本中被.addclass调用。按下切换按钮后，它会将图标更改为显示不同图标的其他类。

这是我的剧本

 var state = false;

 $("#toggleslideButton").click(function () {
        if (!state) {
              $('#secondaryPanel').animate({width: "toggle"}, 1000);
              $('#toggleslideButton').addClass( "icon icon-exclamation" );

        state = true;
           }
        else {
              $('#secondaryPanel').animate({width: "toggle"}, 1000);
              $('#toggleslideButton').addClass( "icon icon-close" );

        state = false;
           }
 });

我的HTML

  <aside id="secondaryPanel">
        <section id="portalInformation">test</section>
  </aside>
  <div id="control"><a href="#" id="toggleslideButton" class="icon icon-close"><span>View</span></a></div>

图标无法正常显示，因为我的本地计算机上正在使用该字体。但我想要做的是当菜单打开时，我希望切换按钮显示其类图标关闭的图标。然后，一旦按下切换按钮并且菜单向后滑动，我希望切换图标读取类图标 - exclamtion。我做错了什么不会改变？

Answer 1

jQuery有一个内置函数：.toggleClass。

$("#toggleslideButton").click(function () {
    $('#secondaryPanel').animate({width: "toggle"}, 1000);
    $('#toggleslideButton').toggleClass( "icon-close icon-exclamation" );
});

在Jquery中按下后更改切换状态图标

1 个答案: