时间戳

首页 > 解决方案 > 如何将切换按钮更改为关闭按钮 onclick

javascript - 如何将切换按钮更改为关闭按钮 onclick

问题描述

我想将切换 btn onclick 更改为关闭 btn 并在单击关闭 btn 时隐藏 .main-nav。请帮我。谢谢

$(".toggles-menu").click(function(e){
    $(".main-nav").slideDown("slow");
     e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggles-menu "><i class = "material-icons rh-header-icon "  style = "color :  #ECF0F1; font-size : 30px ">menu</i></button>

标签： javascriptjquery

解决方案

您可能应该使用一个类来表示显示的文本，而不是在您的内容中使用静态“菜单”。然后，您可以检查按钮是否包含“活动”或“非活动”类（使用 jQuery 的 .hasClass()）并基于此对 DOM 执行更改，如下所示；

<button class="toggles-menu inactive"><i class = "material-icons rh-header-icon "  style = "color :  #ECF0F1; font-size : 30px ">menu</i></button>

$(".toggles-menu").click(function(e){
    $(".main-nav").slideDown("slow");
     if ($(".toggles-menu").hasClass( "active"))
    {
     //Do your transform, remove active class and assign inactive class
     }
    else{
     //Do your transform, remove inactive class and assign active class
    }
     e.stopPropagation();
});

推荐阅读