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

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>

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

Answer 1

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

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