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并将click事件绑定到一个常量父元素。在这种情况下，document。

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

Answer 2

问题是$('.fa-times').click()尚未绑定到元素，因为您尝试绑定此事件的元素尚未包含fa-times类。只有在点击时才会获得课程。一种解决方案是另一个答案中提到的事件委托。

其他解决方案可能是创建2个元素 - 加号按钮和交叉按钮，最初隐藏交叉按钮。

因此，标记看起来像：

<i class="fa fa-times"></i><i class="fa fa-plus"></i>

脚本将更改为：

var main = function() {
      // Hide the cross initially.
      $(".fa-times").hide();

      $('.fa-plus').click(function() {
        $(this).hide();        // Hide the plus
        $(".fa-times").show(); // Show the cross
        ...
      });

      $('.fa-times').click(function() {
        $(this).hide();        // Hide the cross
        $(".fa-plus").show();  // Show the plus
        ...
      });
}

Here's a fiddle.

菜单将打开但不会关闭

2 个答案: