切换功能不起作用 - Jquery

Question

I have an interesting problem. I received help with a function that once a menu trigger is clicked, checks to see if a class has been added to a div and then either displays or fades out. Problem is the function only seems to run once.

Below is the snippet of what I have made.

 $(function() { $('.trigger').click(function() { if( $('.mainNav').hasClass('showMainNav')) { $('.mainNav').fadeOut(100, function() { $('.mainNav').removeClass('showMainNav'); }); } else { $('.mainNav').addClass('showMainNav'); } }); });

 nav { height: 70px; width: 100%; background-color: #ccc; position: fixed; top: 0; left: 0; background-color: transparent; z-index: 1000; } .nav-fixedWidth { width: 95vw; height: inherit; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; background-color: inherit; } .logo-and-trigger { display: flex; justify-content: space-between; } .logo { align-self: center; } .trigger { display: none; } .mainNav { display: flex; margin-left: auto; list-style: none; overflow: hidden; z-index: 1000; } .mainNav>li { padding: 23px 14.6px; box-sizing: border-box; &:nth-child(6) { padding-right: 0; } } .mainNav>li>a { @extend .navText; text-decoration: none; } @media screen and (max-width: 1046px) { .logo-and-trigger { width: 100%; } .trigger { display: flex; align-self: center; color: black; .fa.fa-bars { font-size: 35px; color:#ccc; } } .mainNav { width: 100%; left: 0; position: absolute; top: 70px; width: 100vw; height: 100vw; flex-direction: column; padding-top: 137px; background-color: white; display: none; } .showMainNav { display: block; } .mainNav>li { padding-left: 0; margin-left: 0; text-align: center; padding-bottom: 10px; } .mainNav>li>a { font-size: 21px; color: rgb(102, 160, 253); font-weight: normal; line-height: 28px; text-decoration: none; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <nav> <div class="nav-fixedWidth"> <div class="logo-and-trigger"> <p class="logo">Logo Here</p> <div class="trigger"> <i class="fa fa-bars" aria-hidden="true"></i> </div> </div> <ul class="mainNav"> <li class="navText"><a href="#meetDrive">Meet Drive</a></li> <li class="navText"><a href="#usingDrive">Using Drive</a></li> <li class="navText"><a href="#pricing">Pricing</a></li> <li class="navText"><a href="#download">Download</a></li> <li class="navText"><a href="#forWork">For Work</a></li> <li class="navText"><a href="#Help">Help</a></li> </ul> </div> </nav>

made, can anyone help me out?

Answer 1

jQuery fadeOut method will generate display:none on inline css. Do remember that inline css is stronger than class defined.

you can use below code

$(function() {    
    $('.trigger').click(function() {
        if( $('.mainNav').hasClass('showMainNav')) {
            $('.mainNav').fadeOut(100, function() {
                $('.mainNav').removeClass('showMainNav');
            });
        } else {
            $('.mainNav').fadeIn(100, function() {
                $('.mainNav').addClass('showMainNav');
            });
        }
    });
});

or simply use jQuery toggle method

$(function() {
    $('.trigger').click(function() {
        $('.mainNav').toggle();
    });
});

Answer 2

Use the below code:

$('.trigger').click(function() {
            if( $('.mainNav').hasClass('showMainNav')) {
                $('.mainNav').removeClass('showMainNav');
            } else {
                $('.mainNav').addClass('showMainNav');
            }
        });

Answer 3

Instead of writing a toggle code for your classes, use the existing jquery function toggleClass

$(document).ready(function(){
    $(".trigger").on("click", function() {
        $(".mainNav").toggleClass("showMainNav");
    });
});

Demo: JsFiddle

Answer 4

Using fadeOut is adding CSS property "display:none" . If you want to keep the animation, you need to do something like this.

$(function() {

 $('.trigger').click(function() {
    if( $('.mainNav').hasClass('showMainNav')) {
        $('.mainNav').fadeOut(100, function() {
            $('.mainNav').removeClass('showMainNav');
        });
    } else {
        $('.mainNav').addClass('showMainNav').css("display","");
    }
 });
});