Question

我想将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>

Answer 1

您可能应该使用一个类来表示显示的文本，而不要在内容中包含静态的“菜单”。然后，您可以检查按钮是否包含“活动”或“非活动”类（使用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();
});

Answer 2

 
$(".toggles-menu").click(function(e){
    $(".main-nav").hide(); // changed this to hide
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button class="toggles-menu"><i   style = "color :  #ECF0F1; font-size : 30px "> x </i></button>



<div class="main-nav" style="background-color:yellow;text-align:center"> Main Nav</div>

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

2 个答案: