CODEWITHSUNDEEP
javascriptjquerycss
Melvin Rey
Melvin Rey

Reputation: 147

How to get rid the inline style using jquery or javascript

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 enter image description here

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

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

Upvotes: 4

Views: 749

Answers (4)

j-printemps
j-printemps

Reputation: 1298

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>

Upvotes: 1

Ciro Corvino
Ciro Corvino

Reputation: 2128

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;
    }
}

Upvotes: 1

prasanth
prasanth

Reputation: 22510

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

Upvotes: 4

Samuil Petrov
Samuil Petrov

Reputation: 553

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

Upvotes: 2

Related Questions