How to get rid the inline style using jquery or javascript

Question

How to remove these two inline style beside the .dropdwon menu, I tried the remove attribute [ jQuery('.dropdown-menu').removeAttr('style'); ] unfortunately it doesn't remove the inline style. Every time I hover the nav the inline style change to display block and when it hover out the inline style is set to display:none

<ul role="menu" class=" dropdown-menu" style="display: none;">
<ul role="menu" class=" dropdown-menu" style="display: block;">

Here's my code. I'm trying to remove this on size 767 or mediaquery max-width(767)

jQuery(window).resize(function() {
    var width = jQuery(window).width();
    if( width < 767 ) {
      jQuery('.dropdown-menu').removeAttr("style");
    }
});

jQuery(document).resize(function() {
    var width = jQuery(document).width();
    if( width < 767 ) {
      jQuery('.dropdown-menu').removeAttr("style");
    }
});

please see the two attached image for better visualization

When I hover the nav(About) the subpage show(ul.dropdown-menu) and the inline style will set to display block

When I hover out the nav(About) the subpage (ul.dropdown-menu) inline style will set to display none

Please help me get rid these two inline style the style="display:none"; and style="display:block";

Answer 1

Try with show()

jQuery('.dropdown-menu').show()

or css()

jQuery('.dropdown-menu').css('display','block')

Drag the output window of the fiddle .They will show the menu on resize

Demo Fiddle

Answer 2

There is a JavaScript somewhere that is adding those styles. I guess you are using some framework or template you found in the Internet. Now you either have to remove the not-needed code that adds the styles (recommended!) or bind over it to be removed each time, something like what you have written but in different event:

jQuery('.dropdown-menu').hover(function() {
      jQuery('.dropdown-menu').removeAttr("style");
}, function() {
      jQuery('.dropdown-menu').removeAttr("style");
});

Ensuring this is after the piece of code that does the style adding at first place.

Or you can try totally removing the behaviour for the menu and write your own:

jQuery('.dropdown-menu').unbind();

Answer 3

You can use click instead of hover for mobile, and display: none; by default, set in CSS. Then add a media queries for PC (here > 767px) to force display: block; . The good thing is that you limit the use of JS.

This is a working example of what can be done.

EDIT

I updated the snippet with an example which is, I think, closer to your code.

 $('.menu-item').click(function() { $(this).toggleClass("active"); }); 

 .menu-item .dropdown-menu { display: none; } .menu-item.active .dropdown-menu { display: block !important; } @media only screen and (min-width: 767px) { .menu-item .dropdown-menu { display: block !important; } } 

 <ul role="menu" class="menu"> <li class="menu-item">Menu 1</li> <li class="menu-item"> Menu 2 <ul role="menu" class="dropdown-menu" style="display: none;"> <li>Submenu 1</li> <li>Submenu 2</li> <li>Submenu 3</li> </ul> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 4

Try to append at the end of your main css file a rule-set declaration on .dropdown-menu selector with the property display:none for media-query < 767:

@media screen and (max-width: 766px) {
    .dropdown-menu {
        display:none;
    }
}