Question

在html中，我有两个字体真棒图标的链接，一个加号和一个减号。我想首先加载加号图标。单击加号图标时，它会运行一个功能并打开一个垂直导航栏。在这个阶段，我希望加号图标改为减号。然后，当点击减号图标时，栏会关闭，图标将变回加号。

这是html：

 <nav>
     <a href="#"><i class="fa fa-plus-circle" style="font-size:20px;"></i></a>
     <a href="#"><i class="fa fa-minus-circle" style="font-size:20px;"></i></a>
 </nav>

这是js：

var clicked = false;
$('.fa-plus-circle').click(function() {
    if (clicked == false) {
      $('div.vertical-nav').animate({
        'right': 0
      });
      clicked = true;

    } else {
      $('div.vertical-nav').animate({
        'right': -250
      });
      clicked = false;
    }

  });

})

Answer 1

您不需要拥有两个链接和两个图标，只需更改图标（请注意我已添加了中性课程，toggler）：

<nav>
     <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a>
</nav>

然后切换这两个类，他们将交替（请参阅***条评论）：

var clicked = false;
$('.toggler').click(function() { // ***
    if (clicked == false) {
        $('div.vertical-nav').animate({
            'right': 0
        });
        clicked = true;

    }
    else {
        $('div.vertical-nav').animate({
            'right': -250
        });
        clicked = false;
    }
    $(this).toggleClass("fa-plus-circle fa-minus-circle"); // ***
});

示例：

＆＃13;

var clicked = false;
$('.toggler').click(function() { // ***
    if (clicked == false) {
        $('div.vertical-nav').animate({
            'right': 0
        });
        clicked = true;

    }
    else {
        $('div.vertical-nav').animate({
            'right': -250
        });
        clicked = false;
    }
    $(this).toggleClass("fa-plus-circle fa-minus-circle"); // ***
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

旁注：该功能可以更简单，并且不需要clicked变量：

$('.toggler').click(function() {
    var $this = $(this);
    var toggled = $this.hasClass("fa-minus-circle");
    $('div.vertical-nav').animate({
        'right': toggled ? -250 : 0
    });
    $this.toggleClass("fa-plus-circle fa-minus-circle");
});

（当然，如果您想要其他内容，可以保留clicked。）

示例：

＆＃13;

$('.toggler').click(function() {
    var $this = $(this);
    var toggled = $this.hasClass("fa-minus-circle");
    $('div.vertical-nav').animate({
        'right': toggled ? -250 : 0
    });
    $this.toggleClass("fa-plus-circle fa-minus-circle");
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<nav>
  <a href="#"><i class="fa toggler fa-plus-circle" style="font-size:20px;"></i></a>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

单击事件后更改字体真棒图标

1 个答案: