jQuery .toggle() multiple dropdowns (less than 991px width)

[l1tay2]

I am trying to toggle a menu/submenu for smaller screens. (max-width: 991px) When you click the “product” link, the .dropdown menu should show, and when the “accessories” link is selected, the .subdropdown class should show. It would be nice to tap anywhere off of the menus to release them at any depth.

Note: On screens min-width: 991px (desktop), the css :hover will come into play.

Notice how my JavaScript code will not fire the sub “accessories” menu. You will have to refresh if you resize your window to test.

Here is the live example: Click Here

Here is my js code

$(function() {

if ($(window).width() < 991) {

    $('#product-link').click(function() {
        $('.dropdown').toggle();
    });

    if ('.dropdown' === true) {
        $('#accessories-link').click(function() {
            $('.subdropdown').show();
        });
    } else {
        $('.dropdown').hide();
    }
}

});

CSS

.dropdown {
    list-style-type: none;
    color: white;
    background-color: #1D1D1D;
    padding: 25px 0px;
    position: absolute;
    z-index: 999;
    display: none;
}

.subdropdown {
    background-color: #333333;
    color: white;
    left: 146px;
    list-style-type: none;
    padding: 25px 25px;
    position: absolute;
    top: 0;
    width: 300px;
    display: none;
}

@media (min-width: 991px) {
ul li:hover ul.dropdown {
    display: block;
}
}

@media (min-width: 991px) {
ul li:hover > ul {
    display: block;
}
}