javascript 更改字体awesome菜单切换图标关闭图标

9o685dep 于 2023-02-15 发布在 Java

关注(0)|答案(1)|浏览(170)

我需要改变我的菜单图标关闭图标点击关闭我的旁边菜单。
iv试图玩弄添加和删除类函数，但无法工作。

$(document).ready(function(){
    $('#menu').click(function(){
        $('.aside').toggleClass('toggle');
    });

    $(window).on('scroll load',function(){

        $('#menu').removeClass('fa-times');
        $('.aside').removeClass('toggle');

        if($(window).scrollTop() > 0){
            $('.top').show();
        }else{
            $('.top').hide();
        }
    });
});

#menu{
    position: fixed;
    top: 30px; right: 30px;
    background: #333;
    color: #fff;
    cursor: pointer;
    font-size: 20px;
    border-radius: 10px;
    padding: 10px;
    z-index: 1000;
    display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>

<div id="menu" class="fas fa-bars"></div>

JavaScript

来源：https://stackoverflow.com/questions/75444243/change-font-awesome-menu-toggler-icon-to-close-icon

1条答案

按热度按时间

igetnqfo1#

$(document).ready(function() {
    $('#menu').click(function() {
        $('.aside').toggleClass('toggle');
        if ($('#menu').hasClass('fa-bars')) {
            $('#menu').removeClass('fa-bars').addClass('fa-times').text('');
        } else {
            $('#menu').removeClass('fa-times').addClass('fa-bars').text('');
        }
    });

});

#menu{
  position: fixed;
  top: 30px; right: 30px;
  background: #333;
  color: #fff;
  cursor: pointer;
  font-size: 20px;
  border-radius: 10px;
  padding: 10px;
  z-index: 1000;
  width:20px;
  text-align:center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/fontawesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.js"></script>

<div id="menu" class="fas fa-bars"></div>

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 更改字体awesome菜单切换图标关闭图标

1条答案

相关问题

热门标签

最新问答