jquery - 菜单将打开但不会关闭

Question

到目前为止我已经得到了

        var main = function() {
      /* Push the body and the nav over by 285px over */
      $('.fa-plus').click(function() {

        $(this).removeClass( "fa-plus" ).addClass( "fa-times" );

        $('#side-menu').animate({
          left: "0px"
        }, 200);


        $('#content-area').animate({
          left: "200px"
        }, 140);
      });

      /* Then push them back */
      $('.fa-times').click(function() {

        $(this).removeClass( "fa-times" ).addClass( "fa-plus" );

        $('#side-menu').animate({
          left: "-285px"
        }, 200);

        $('#content-area').animate({
          left: "0px"
        }, 200);
      });
    };


    $(document).ready(main);

完整的脚本和 html 在这里 http://jsfiddle.net/sd6b5my4/

我想要实现的是，当您按下 fa-plus 时，菜单会打开，并将 fa-plus 更改为 fa-times，给人一种它正在变形的印象，但是脚本会关闭它并将 fa-times 返回到fa-plus 似乎不起作用

谁能帮我吗？

谢谢

Answer 1

事件监听器 $('.fa-times').click(function() { ... }); 甚至从未被调用，因为在执行脚本时，有没有类 .fa-times 的元素。当您更改元素的类时，初始事件监听器仍附加到该元素，但预期的事件监听器则不然。

一种解决方案是使用 event delegation并将单击事件绑定(bind)到常量父元素。在本例中，文档。

Updated Example

$(document).on('click', '.fa-plus', function () {
    // ...
});

$(document).on('click', '.fa-times', function () {
    // ...
});

<小时/>

或者，更好的选择是使用一个 click 事件监听器，然后添加条件逻辑来确定元素的类。

例如:

Example Here

$('.toggleableIcon').on('click', function () {
    if ($(this).hasClass('fa-plus')) {
        $(this).removeClass("fa-plus").addClass("fa-times");
        $('#side-menu').animate({
            left: "0px"
        }, 200);
        $('#content-area').animate({
            left: "200px"
        }, 140);
    } else {
        $(this).removeClass("fa-times").addClass("fa-plus");
        $('#side-menu').animate({
            left: "-285px"
        }, 200);

        $('#content-area').animate({
            left: "0px"
        }, 200);
    }
});