We Keep Coding

Keep submenu open after hover

Website is Mariodidit.com
When hovering over "Portfolio" there is a submenu that appears.
However, if you do move the mouse directly over the center item, the menu just disappears, making it frustrating to navigate. I would like to use some javascript to keep it open after hovering "Portfolio"
$('.main-navigation li ul li a').hide();
$('.main-navigation').live('hover', function(e) {
$(this).addClass('activeitem');
$('.main-navigation li ul li a').show();
});
Ive tried a few different code snippets like this and have made no progress.
Also using "Header and Footer scripts" plugin to apply this script to my wordpress site.

You'll probably want to use on click instead of hover.
(function($) {
$('.main-navigation li a').on('click', function(e) {
e.preventDefault();
$(this).parent().toggleClass('active');
});
})(jQuery);
Then in CSS add styles for that class.
.main-navigation .active ul {
display: block;
}
.main-navigation ul ul {
display: none;
}

How can I remove a css portion when a button is clicked

I need to remove this css portion from a navbar-collapse when I click a button:
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
I tried something like this:
$("#toggleButton").click(function()
{
$(".navbar-collapse").remove("ul.nav","li.dropdown","ul.dropdown-menu");
});
But it doesn't work. I want to have a responsive navbar menu and when it collapse remove the dropdowns from that view.

Have you tried removeClass?
$(".navbar-collapse").removeClass("nav dropdown dropdown-menu");
If you want to remove the elements from the DOM
$(".nav, .dropdown, .dropdown-menu").remove();

You simply need to just set css attribute display to none on class .dropdown-menu applied to ul element.
ul.nav li.dropdown:hover doesn't have any relevancy here since they are used as an element locator and does not have display:none applied to them.
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').css('display','none');
});
To remove the entire css attributes,
$("#toggleButton").click(function()
{
$('ul.dropdown-menu').removeAttr('style');
});

There's more than one way to accomplish this but you can do it by changing the css when you click the button
Here's how you would accomplish that:
$("#toggleButton").click(function()
{
$("ul.nav li.dropdown:hover > ul.dropdown-menu").css({"display": "none"});
});

Try this :
$("#toggleButton").click(function(){
$(".navbar-collapse").remove("ul.nav li.dropdown > ul.dropdown-menu");
});

hide drop down menu after clicking doesn't show it after rehover

my menu items don't redirect to another page, so after clicking them they don't hide. I can hide them using javascript or jquery, but they hide forever. I've tried every single suggestion out there but none of them work for me. this is my html:
<nav>
<ul>
<li class="windows">Windows
<ul>
<li>Tile</li>
<li>Close all</li>
</ul>
</li>
</ul>
</nav>
my css:
nav ul ul {
display: none;
position: absolute;
top: 100%;
z-index: 1003;
}
nav ul li:hover > ul {
display: block;
height: auto;
}
and my javascript for tile:
tileObject = $('a.tile');
tileObject.click(function () {
$('.windows ul').hide();
tileAction();
});

If you hide your menu using $('.windows ul').hide(); you will need to do a $('.windows ul').show();(or smething equivalent) to display it again.
As $('.windows ul') will be hidden. You will need do bind the event to another element, for example
$('li.windows').click(function(){
$('.windows ul').show()
});`
--EDIT--
For that effect you don't need javascript. Check the fiddle. Just use the selector :hover. Then, if you want to do some actions using JS, just use the hover event. Take a look to the docs
--EDIT 2--
I got it now. Check this. You need to unbind the hover event just before hide the element. Then after you hide the element you bind it again.

You can try this one:
$(document).ready(function(){
$("li a.tile").click(function(){
$("body").off("hover", "li.windows");
$("nav ul li ul").hide();
$("li.windows").hover(function(){
$("nav ul li ul").show();
});
});
});
DEMO

If you HIDE and element then you need to SHOW it back again. First of all you have top:100% in your css and you dont need this.

Stop flicker effect on dropdown menu

How do I stop the 'flicker' effect on my menu?
When I click 'Dropdown 1' the Test 1 & Test 2 flicker. I believe it's because I'm forcing this using the !important clause.
Help?
$(document).ready(function($) {
$('.inline').find('.navtoggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast');
//Hide the other panels
$(".sub-menu").not($(this).next()).slideUp('fast');
});
});
http://jsfiddle.net/4dm318nn/1/

You shouldn't be forcing visibility so hard in your CSS. Something like this should do:
$(this).next('ul').slideToggle();
$(this).closest('li').siblings().children('ul').slideUp();
Demo
A CSS adjustment shows the sub-sub menu:
.primary-item > .sub-menu {
display: none;
}

Commenting out the slideUp command stopped the stuttering. So, I figured I'd check out what the selector there was catching:
console.log($(".sub-menu").not($(this).next()));
Showed me that it was actually selecting three different elements. To make sure it only selected the right answer, you can simply add .navtoggle + to the .submenu selector:
$(".navtoggle + .sub-menu").not($(this).next()).slideUp('fast')

Try this
jQuery
$(document).ready(function($) {
$('.inline').find('.navtoggle').click(function(){
//Expand or collapse this panel
$(this).next().slideToggle('fast', function(){
$(this).find(".sub-menu").slideDown('fast');
});
//Hide the other panels
$(this).parent().siblings().find(".sub-menu").slideUp('fast');
});
});
CSS
.accordion-toggle {cursor: pointer;}
.sub-menu {display: none;}

How can I remove caret on Bootstrap 3 menu and show dropdown on hover?

I have set up Bootstrap 3 on my Wordpress theme and I have got the submenu working correctly on a mobile (grey arrow to indicate it is a dropdown which opens on click).
On a desktop I would like the dropdown to work on hover without the arrow image. Is there a way to do this without affecting the mobile layout? see this.

I get it, you don't want the users to see the "caret" on the desktop. This could be achieved with minimal amount of Media Queries. It should be something along these lines. I got the Desktop breakpoint Media query code right from Bootstrap 3 Docs.
#media (min-width: 1200px) {
.navbar-nav .caret {
display:none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
}

You can use Jquery hover to activate the drop-down
Try this
$(document).ready(function() {
$('.nav li.dropdown').hover(function() {
$(this).addClass('open');
}, function() {
$(this).removeClass('open');
});
if($(window).width() > 750)
{
$('b.caret').hide()
}
});
DEMO