How to get rid of inline style using jquery or javascript

Question

How to remove these two inline styles next to the .dropdwon menu, I tried the remove [ jQuery ('. Dropdown-menu') attribute . removeAttr ('style'); ], unfortunately, it does not. Do not delete the inline style. Every time I navigate inline style to a display block , and when it freezes, inline style has a value : none

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

Here is my code. I am trying to remove this to size 767 or maximum width of mediaquery (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");
    }
});

see two attached images for better visualization

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

( ) (ul.dropdown-menu), none

style = "display: none"; style = "display: block";

Answer 1

show()

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

css()

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

.

-

Answer 2

JavaScript JavaScript, . , - , . , (!), , , , :

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

, .

:

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

Answer 3

click hover , display: none; - CSS. - ( > 767px), display: block;. , JS.

, .

, , , .

$('.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 adding the rule set declaration in the selector to the end of the main css file .dropdown-menuwith the property display:nonefor media request <767:

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