Show sub-menu on click

Question

My menu is working on hover. When I hover first level, it shows the second level menu.

I would like to change this so that when I click first level, it shows the second level and it stays visible.

<ul class="mainNav">
    <li><a href="rpm.php">Cours collectifs</a>
        <ul class="dropDown">
            <li><a href="rpm.php">RPM</a></li>
            <li><a href="bodypump.php">Bodypump</a></li>
            <li><a href="bodyattack.php">Bodyattack</a></li>
            <li><a href="bodycombat.php">Bodycombat</a></li>
            <li><a href="bodyJam.php">Bodyjam</a></li>
            <li><a href="bodybalance.php">Bodybalance</a></li>
            <li><a href="cxworx.php">Cxworx</a></li>
        </ul>
    </li>
</ul>
$(function () {

    var url = window.location.pathname;
    var urlRegExp = new RegExp(url.replace(/\/$/, ''));
    $('.mainNav li a').each(function () {
        // and test its href against the url pathname regexp
        if (urlRegExp.test(this.href)) {
            $(this).addClass('active');
            $(this).closest('.mainNav>li').children('a').addClass("active");
        }
    });

});

$("ul.mainNav li").hover(function () {
    $(this).find("ul.dropDown").css({ "display": "block" }).fadeTo('500', '1.0');
}, function () {
    $(this).find("ul.dropDown").fadeTo('200', '0.0').css({ "display": "none" });
});

My css

@import url(http://fonts.googleapis.com/css?family=Raleway:600,800);

ul.mainNav {
    margin:0;
    padding:0;
    list-style-type:none;
    background-color: #f0eff0;
    height: 28px;
    font-family: 'Raleway', sans-serif;
    color: #606060;
    float: right;
    margin-right: 100px;

}
.menu-wrapper{
    background-color: #f0eff0;
    height: 3.4em;
}


.mainNav li {
    margin:0;
    padding:0;
    list-style-type:none;
    height: 28px;
    line-height:28px;
    float: left;
    color: #606060;
    font-size: 14px;
}
.mainNav li a {
    padding: 0 20px;
    line-height: 3.8em;
    display:block;
    color: #606060;
    text-decoration:none;
    font-family: 'Raleway', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
}

.mainNav li:hover > a {
    color: #ffc102;
}

.mainNav li a:hover{
    color: #ffc102;
}

.mainNav li ul.dropDown {
    margin:0;
    padding:0;
    position: absolute;
    display: none;
    background: #fff;
    opacity: 0.0;
    height: 3em;
}
.mainNav li ul.dropDown li {
    float: left;
    height: 28px;
    line-height: 28px;
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: #606060;
    /*font-weight: normal;*/

}
.mainNav li ul.dropDown li a {
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
    line-height: 4em;
    height: 28px;
    display:block;
    padding: 0 20px;
    color: #606060;
    text-transform: uppercase;
}
.mainNav li ul.dropDown li a:hover {
    color: #ffc102;
}

.img-logo-coach-menu {
    position: absolute;
    margin-left: 5em;
}

.active {
    background: #DCDCDC
    color: #ffc102;
    /*opacity: 1;*/
    /*visibility: visible;*/
}

I was trying to do something like that

    $('.mainNav li a').click(function(){
       $('.mainNav li a ul.dropDown').hide();

        $(this).closest(" .dropDown" ).css({"display" : "block"});
        $(this).closest(" .dropDown" ).css({"opacity" : 1});
       $(this).next().show();

    });

but it is not working.

I think this would be considered a "Please debug my code" question... :/ — Ted Nyberg, Jun 02 '15 at 12:19
As Ted said it is not a proper question but as a beginner I welcome you to community and answered your question. — Vikram, Jun 02 '15 at 12:40
Please go through the standard you need to follow while posting a question. — Vikram, Jun 02 '15 at 12:41
possible duplicate of [How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — Liam, Jun 02 '15 at 12:43

score 0 · Accepted Answer · answered Jun 02 '15 at 12:39

Mike you were not using your selectors properly, jquery always depends upon your DOM structure so your code might be correct but its possible that it will not give you desired result.

I just updated http://jsfiddle.net/mst0057o/4/

code correct is as follows

$('.mainNav > li a').click(function(e){
            e.preventDefault();
            $(this).next("ul.dropDown").css({"display" : "block"}).fadeTo('500', '1.0');
        });

rest of part you need to take care, i just updated click function.

thank you very much i'm still learning – MIKE Jun 02 '15 at 12:41 — MIKE, Jun 02 '15 at 12:41

Show sub-menu on click

1 Answers1