though jQuery .toggle() dropdown (less than 991px width)

Question

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 :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();
        }
    }

});

Edit: Although not perfect, it works. I am still wanting to use .click and not .hover but this gets the job done.

$(document).ready(function() { $('.top-menu').hover( function(){ $(this).children('.sub-menu').fadeIn(200); }, function(){ $(this).children('.sub-menu').fadeOut(200); } ); })

Answer 1

Your if statement is going to always evaluate to false.

Line 9: if ('.dropdown' === true)

Answer 2

In JQuery you are setting up event listeners on specific elements however your current setup is not taking advantage of the on method for your product-link. Try switching your code up to something like

$(function() {
    $('#product-link').on('click mouseover', function(){
        $('.dropdown').toggle();
        if($('#product-link').hasClass('.dropdown')){
            //something else here 
        }
    });
});