mardi 29 mai 2018

Click function never reading else statement to remove class

I have been stuck on a sliding down menu, but have made some headway with it. I had to modify a lot to make it work for both desktop and mobile viewports. The only thing I am stuck on now is getting the menu to close in a < 640px viewport. In my snippet and jsfiddle below there is a lot of code, but the only code that really matters to this question is the javascript below:

$('#serviceClick').click( function () {
    var relative = $(this);
    if (!relative.hasClass('activeSol')) {
        $('#serviceNav').removeClass('activeSol');
        $('#serviceNav').addClass('activeSol').slideDown();
    } else  {
        $('#serviceNav').removeClass('activeSol').slideUp(500);
    }
    return false;
});

Basically my else statement is now removing the class 'activeSol` and then sliding up the selection.

In the mobile viewport, after clicking on "Solutions" the menu expands, but when you click on "Solutions" again, nothing happens.

enter image description here

It seems as if the variable relative is never reading as the class appended to it, making the click function run else. I did a simple console.log and the else never runs. I tried changing the click function to a change, but then the menu never triggers.

Does anyone see what is causing my else statement to not removeClass from serviceNav and slideUp?

JSfiddle link to see in mobile viewport.

$('#serviceClick').click( function () {
                var relative = $(this);
                if (!relative.hasClass('activeSol')) {
                        $('#serviceNav').removeClass('activeSol');
                        $('#serviceNav').addClass('activeSol').slideDown();
                } else  {
                        $('#serviceNav').removeClass('activeSol').slideUp(500);
                }
                return false;
        });
        $('[data-pop-close]').on('click', function(e)  {
                //var targeted_pop = $(this).attr('data-pop-close');
                $('#serviceNav').removeClass('activeSol');
                $('body').css('overflow', 'auto');
                e.preventDefault();
        });

nav {
        background: #FFF;
        height: 70px;
        width: 100%;
        max-width: 100%;
        box-shadow: 0px 6px 15px -4px rgba(0,0,0,0.12);
        position: fixed;
        top: 0;
        z-index: 999;
        box-sizing: border-box;
}
#nav-logo {
        float: left;
        height: 100%;
        width: auto;
        display: block;
        position: relative;
        margin-left: 5%;
}
#nav-logo img {
        height: 80%;
        width: auto;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);-webkit-transform: translateY(-50%);
}
#mobile-button {
        background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/menu.svg");
    background-size: 30px 30px;
        float: right;
        width: 30px;
        height: 30px;
        margin-right: 5%;
        margin-top: 15px;
        cursor: pointer;
        display: none;
        transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#mobile-button:hover {
        transition: ease 0.3s;-webkit-transition: ease 0.3s;
}
#nav-pop {
        float: right;
        display: block;
        margin-right: 5%;
        margin-top: 25px;
        transition: ease 0.5s;-webkit-transition: ease 0.5s;
}
#nav-pop.active {
        opacity: 1;
        background: rgba(0,0,0,0.8);
        background: #2f2f2f;
        right: 0;
        margin-top: 0;
        margin-right: 0;
        z-index: 999999;
        transition: ease 0.6s;-webkit-transition: ease 0.6s;
        transform: translateX(0);-webkit-transform: translateX(0);
        box-shadow: -9px 0px 9px 1px rgba(0,0,0,.2);
}
#nav-list li {
        display: inline-block;
        margin: 0 17px;
        vertical-align: top;
}
#nav-list li:first-child {
        margin-left: 0px;
}
#nav-list li:last-child {
        margin-right: 0px;
}
#nav-list li a, #serviceClick {
        text-decoration: none;
        font-family: 'Muli', sans-serif;
        font-size: .9rem;
        color: #747678;
        letter-spacing: 1px;
        vertical-align: top;
        transition: all .3s;-webkit-transition: all .3s;
        cursor: pointer;
}
#nav-list li a:after, #serviceClick:after {
        content: '';
    display: block;
        width: 0;
        margin-top: 6px;
        background: #b82222;
        height: 2px;
        transition: width .3s;
}
#nav-list li a:hover, #serviceClick:hover {
        color: #4b4b4b;
        transition: all .3s;-webkit-transition: all .3s;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
    width: 100%;
    transition: width .3s;
}
#nav-list li a.navInverse {
        padding: 10px 12px;
        border-radius: 2px;
        box-sizing: border-box;
        font-family: 'Muli', sans-serif;
        font-size: 1.2rem;
        color: #FFF;
        border: 1px solid #b82222;
        background: linear-gradient(to right bottom, #b82222, #a51e1e);
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer;
}
#nav-list li a.navInverse:hover {
        background: #b82222;
        background: #FFF;
        color: #b82222;
        /*transition: all 0s;-webkit-transition: all 0s;*/
}
#nav-list li a.navInverse:after {
        content: '';
    display: none;
        width: 0px;
        height: 0px;
        transition: none;
}
#nav-pop-close {
        display: none;
}
#nav-pop-close, #close-panel {
        position: relative;
        top: 3%;
        left: 90%;
        background-image: url("https://s3.us-east-2.amazonaws.com/mbkitsystems/icon_close.png");
        background-size: 30px 30px;
    background-repeat: no-repeat;
        height: 30px;
        width: 30px;
        cursor: pointer;
}
/*- Service NAV -*/
#serviceNav {
    width: 100%;
    top: -40vh;
        left: 0;
    z-index: -1;
    position: fixed;
    background-color: rgba(0,0,0,0);
    height: 40vh;
    transition: all .4s;
        padding: 20px 0;
}
#serviceNav.activeSol {
    top: 0;
    width: 100%;
    background-color: rgba(0,0,0,.9);
    z-index: 99999;
        height: 40vh;
}
.popup-close {
        position: absolute;
        right: 12px;
        top: 12px;
        width: 32px;
        height: auto;
}
#serviceNavInner {
        margin: 0 5%;
        height: 100%;
        position: relative;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
        width: 33%;
        height: 100%;
        border-right: 1px solid rgba(255,255,255,.5);
        position: relative;
}
#serviceNavBlock1Wrap {
        width: 80%;     
        text-align: left;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {
        width: 66.6%;
        height: 100%;
        margin: 10px auto;
        position: relative;
}
.servNavItemWrap {
        display: inline-block;
        vertical-align: top;
        width: 25%;
        margin-bottom: 50px;
        text-align: center;
        cursor: pointer;
        -webkit-backface-visibility: hidden;
}
.servNavItemWrap img {
        width: 75px;
        height: 75px;
        -webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover img {
        -webkit-transition: all 0.25s;transition: all 0.25s;
    -webkit-transform: scale(1.1);transform: scale(1.1);
        -webkit-backface-visibility: hidden;
}
.servNavItemWrap a {
        text-decoration: none;
        outline: none;
        box-sizing: border-box;
}
.servNavItemTitle {
        margin-top: 5px;
        -webkit-transition: all 0.25s;transition: all 0.25s;
}
.servNavItemWrap:hover .servNavItemTitle {
        color: #FFF;
        -webkit-transition: all 0.25s;transition: all 0.25s;
}

/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {
  
  #mobile-button {
        display: block;
}
#nav-pop {
        float: none;
        opacity: 0;
        position: fixed;
        margin-top: 0;
        width: 75%;
        right: -100%;
        height: 100vh;
        transform: translateX(100%);-webkit-transform: translateX(100%);
}
#nav-pop-close {
        display: block;
        background-size: 20px 20px;
        height: 20px;
        width: 20px;
}
#nav-list {
        margin-top: 20px;
}
#nav-list li {
        display: block;
        position: relative;
        width: 100%;
        margin: 0;
        padding: 20px 10%;
        background: linear-gradient(to bottom right, #151515, #2f2f2f);
        background: #2f2f2f;
        text-align: left;
        cursor: pointer;
        border-bottom: .3px solid #FFF;
}
#quoteButton {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
}
#nav-list li:hover #quoteButton {
        background: #2f2f2f;
}
#nav-list li:hover, #nav-list li:active {
        background: #000;
}
#nav-list li:first-child {
        margin-left: 0;
}
#nav-list li:last-child {
        margin: 20px auto;
        text-align: center;
        border-bottom: none;
        background: #2f2f2f;
        padding: 20px 0;
}
#nav-list li a, #serviceClick {
        font-family: 'Nunito', sans-serif;
        font-size: .8rem;
        color: #FFF;
        letter-spacing: .3rem;
}
#nav-list li a:after, #serviceClick:after {
    display: none;
}
#nav-list li a:hover, #serviceClick:hover {
        color: #FFF;
}
#nav-list li a:hover:after, #serviceClick:hover:after {
    width: 0%;
}
/*- Service NAV -*/
#serviceNav {
    width: 100%;
    z-index: 1;
    position: relative;
    background-color: rgba(0,0,0,0);
    height: 200px;
    transition: all .4s;
        padding: 10px 0;
        display: none;
        top: 0;
}
#serviceNav.activeSol {
    background-color: #000;
    z-index: 9999999;
        height: auto;
        min-height: 20%;
        top: 0;
        border-bottom: .01em solid #FFF;
}
.popup-close {
        display: none;
}
#serviceNavInner {
        margin: 0 2.5%;
}
/*--- Block 1 ---*/
#serviceNavBlock1 {
        width: 100%;
        height: 50px;
        border-right: none;
        display: block;
        position: relative;
}
#serviceNavBlock1Wrap {
        width: 100%;
        text-align: center;
}
#navOverviewT, #navOverviewP {
        display: none;
}
#solOverviewB {
        font-size: .7rem;
}
/*--- Block 2 ---*/
#serviceNavBlock2 {     
        width: 100%;
        height: 100%;
        margin: 10px auto;
        display: block;
}
.servNavItemWrap {
        display: inline-block;
        width: 25%;
        margin-bottom: 15px;
}
.servNavItemWrap img {
        width: 30px;
        height: 30px;
}
.servNavItemTitle {
        margin-top: 5px;
        font-size: .5rem;
}

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
        <div id="nav-logo">
        </div>
        <div id="mobile-button"><img src="" class="hidden" alt=""></div>
        <div id="nav-pop">
        <div id="nav-pop-close"></div>
                <ul id="nav-list">
                        <li><a href="http://localhost:8080/about.php">ABOUT</a></li>
                        <li id="serviceClick">SOLUTIONS</li>
                        <div id="serviceNav">
                                <div id="serviceNavInner">
                                        <div id="serviceNavBlock1" class="iblock">
                                                        <a href="http://localhost:8080/solutions.php"><button class="buttonInv2" id="solOverviewB">Solutions Overview</button></a>
                                        </div><div id="serviceNavBlock2" class="iblock">
                                        </div>
                                </div>
                        </div>
                        <li><a href="http://localhost:8080/learn.php">LEARN</a></li>
                        <li><a href="http://localhost:8080/contact.php">CONTACT</a></li>
                        <li><a href="http://localhost:8080/quote.php" class="navInverse" id="quoteButton">REQUEST QUOTE</a></li>
                </ul>
        </div>
</nav>
Publié par à
Libellés :

Aucun commentaire:

Enregistrer un commentaire

Inscription à : Publier les commentaires (Atom)