navbar show on hover with jquery fails - ideas?

[rootKID]

hi. So i have been strugging a little bit with some jQuery.

My original code, of which was working perfectly for my navbar is:

$(document).ready(function(){
    $('ul.navbar-nav li.dropdown').mouseenter(function(){
        $(this).find('.dropdown-menu').delay(200).fadeIn(500);
    });
    $('ul.navbar-nav li.dropdown').mouseleave(function(){
        $(this).find('.dropdown-menu').delay(200).fadeOut(500);
    });
});

Now i would like to achieve a little more. Saying if it already has the class "show", it should NOT run the code saying when mouse hovers in/out, to show the menu. However, if the class does not appear, make the menu hover.. if that makes sence? I am using "BootStrap v.4.3.1" as CSS framework.

My original idea is to run the code when a mouse if hovering over the navbar etc so that the menu can show. However, when the menu shows on hover, and the user clicks the element, it gives the class ".show" on the element! Of which brings me to the point saying that if the user does that, nothing else should happen, the menu shall still be there, even if the user removes the mouse. But if the user just hovers in/out, it fades in and out of course.

Also, this shall only happen on screens like laptops etc and above... so not on smaller devices. In such case, i have been thinking of using the width of the screen as a guideline to check pixelwise if my javascript code should run or not, but i am a bit un-sure on how to put it.

I how my explanation gives you an idea of what i am trying to accomplish.

Thanks a lot if you have ideas and tips!

 

[dsonesuk]

Add class on click event to make menu stick, toggle/remove class on second click. Then use .not(.clickclass) for your above jQuery code, to ignore that specific class. I should consider using .on('mouseover', rest of code) instead of .mouseover method you are using now.