Reputation: 147
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";
Upvotes: 4
Views: 749
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
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
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
Upvotes: 4
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