We Keep Coding

Keep parent selected while mouseovering the dropdown in boostrap

What I'm trying to do is to keep the <a> selected while I'm mouseovering the dropdown:
I tried the closest selector but didn't work:
$('.dropdown-menu', this).stop().fadeIn("fast").closest("a").css("background-color", "#eee");
This is my jsfiddle. Thanks.

I'd suggest using CSS:
li:hover {
background-color: #eee;
}
JS Fiddle demo.
Obviously adjust selector-complexity as necessary.

use css
the default styles are added for a tag add this styles for li
.nav > li:hover, .nav > li:focus {
background-color: #eee;
}
demo - http://jsfiddle.net/gpLa33ad/9/

You can modify your function so that it toggles bootstrap's open class on the li element in the dropdown menu after your animation.
// Dropdown Menu Fade
jQuery(document).ready(function () {
$(".mega-inner-dropdown").hover(
function () {
$('.dropdown-menu', this).stop().fadeIn("fast");
$(this).children("li").addClass("open");
},
function () {
$('.dropdown-menu', this).stop().fadeOut("fast");
$(this).children("li").removeClass("open");
});
});
Live example: http://jsfiddle.net/08gxjset/

Changing the state of an anchor to active via javascript or jquery

Im having an issue getting the state of an anchor tag to be active. Say I am on the home page, I want the home navigation link to have an active state so it has a different color. Here is what im doing at the moment. I am referencing jquery. I have stubbed in alerts to make sure my script is getting hit. Here is what I last tried.
<div class="grid__unit one-whole">
<nav role="navigation">
<ul id="nav--primary" class="navbar navbar--menu">
<li><a class="navitem" href="#">Link</a></li>
<li><a class="navitem" href="http://www.google.com">Google</a></li>
<li><a class="navitem" id="myNavButton" href="myLink">myTitle</a></li>
</ul>
</nav>
with css
a:hover, a:active {
color: #b74800;
}
and script
<script>
$(document).ready(function () {
$("#myNavButton").addClass("active");
});
</script>
EDIT 1:
I have tried adding an a.active tag to the css and script as follows, with no success.
<script>
$(document).ready(function () {
var path = location.pathname.length ? location.pathname : window.location.href;
$('.active').removeClass('active');
$("#nav--primary").find('a[href*="' + path + '"]').addClass("active");
});
</script>
with css
a:hover, a:active, a.active {
color: #b74800;
}
EDIT 2 --SOLVED

In your CSS you have missed a.active declaration. Try with:
a:hover, a:active, a.active {
color: #b74800;
}
In jQuery to get element by ID, you have to use #myNavButton, so:
$("#myNavButton").addClass("active");

So you need to do two things:
1. make a css class of a.active
a:hover, a:active, a.active {
color: #b74800;
}
2. do this in jQuery:
$(document).ready(function () {
var path = location.pathname.lenght ? location.pathname : window.location.href;
$('.active').removeClass('active');
$("#nav--primary").find('a[href*="'+path+'"]').addClass("active");
});

#nav--primary a.active {
color: #b74800;
}
Add this style.

To get the desired functionality, I ended up adding an ID to the parent list item and on document ready, I added a class to that list item. In css i added another class for this.
#nav--primary .is--selected .navitem,
#nav--primary .is--selected .navitem:hover,
#nav--primary .is--selected .navitem:focus {
background: #colorhere; /* primary nav current page background color */
color: #colorhere /* primary nav current page text color */
}
with script
<script>
$(document).ready(function () {
$("#myLiID").addClass("is--selected");
});
</script>

jQuery Toggling when it shouldn't

So I got myself this far and I've solved the problem I was having but I'd still like to know why this is.
First, here is my original code:
$(function(){
var navListLength = $('nav ul li').length;
buttonPress(1);
function buttonPress(i){
if(i < navListLength){
$('nav ul li a:nth-child(' + i + ')').click(function(){
$(this).toggleClass('button-pressed');
console.log('Button Down');
setTimeout(function(){
$('nav ul li a:nth-child(' + i + ')').toggleClass('button-pressed');
buttonPress(i + 1);
console.log('Button Up');
}, 500);
});
}
}
});
It's supposed to toggle the style of a single link in a navigation list when it's clicked and not affect any other links in the list.
I wanted to do it this way so that I could add any amount of links to this list in the future without having to create a new a new class and add it to the jQuery each time.
The first toggle works as expected. But the second toggle is being applied to all of the links and it creates an inverted effect. So all of the links are opposite of what they are supposed to be except the link being clicked.
I solved the problem by changing the first toggleClass to addClass and the second toggleClass to removeClass. But I shouldn't have to do that.
Could anyone tell me why this is?
Here's a picture of my buttons:

You're doing way too much work just to toggle a class on click. You don't need to make an array of all the navigation items, the whole point of jQuery is that it handles selecting DOM elements for you.
Try this:
$(function() {
$('nav ul li').click(function() {
$(this).toggleClass('button-pressed');
});
});
You don't have to handle making sure the others aren't affected. Only the clicked element gets toggled.
-- EDIT --
I see what you were going for with the setTimeout() now. You can do it inside the click handler, like this:
$('nav ul li').click(function() {
// store the selection in a variable
var $this = $(this);
$this.toggleClass('button-pressed');
window.setTimeout(function() {
$this.toggleClass('button-pressed');
}, 500);
});
FIDDLE

Why now in pure CSS like:
LIVE DEMO
<span class="button" tabindex="1">
<span>Home</span>
</span>
span.button{
display:inline-block;
border-radius:9px;
background:#ddd;
padding:6px;
vertical-align:middle;
outline:none;
}
span.button > span{
background:#F06BAE;
color:#fff;
font-size:20px;
font-weight:bold;
display:inline-block;
padding:10px 25px;
border-radius: 6px;
border-bottom:4px solid #CB4589;
transition: border 0.3s;
}
span.button:focus > span{
border-top: 4px solid #FCA9D2;
border-bottom-width:0;
}

jQuery - Click sub element but hightlight parent?

I have a html code like this:
<ul>
<li class="curent">Home</li>
<li>
Products
<ul class="sub">
<li>Samsung</li>
<li>Lenovo</li>
</ul>
</li>
<li>News</li>
</ul>
http://img38.imageshack.us/img38/5795/70a.png
I want to click any a tag and li tag parent is hightlighted. I try this code but it doesn't work with a tag in ul has sub class:
var this_url = window.location.href;
$('#block_nav_primary ul li').each(function() {
if ($(this).children().attr('href') == this_url) {
$('#block_nav_primary ul').find('li[class="curent"]').removeClass('curent');
$(this).addClass('curent');
}
});
Can anyone point me in the right direction here?
Thanks for your help!
P/S: it looks like this thread Highlight Parent Link in Navigation Menu With Jquery

I'm not sure I quite understand your wording, but you want to apply the same effect to all LI tags, including those in a sublist?
Replace this:
$('#block_nav_primary ul li').each(function() {
With this:
$('#block_nav_primary ul').find('li').each(function() {

Try
val items = $('#block_nav_primary ul li').click(function(){
items.filter('.current').removeClass('current');
$(this).addClass('current')
})

Why don't you try styling it such that the A tag takes the width of the entire LI tag and so when you click A tag, it would highlight the entire thing. The CSS code for it would be something like:
li a {display: block; width: 100%; padding: 10px 0; background-color: pink;}
li a:hover {background-color: orange;}

Try this:
$("ul a").click(function () {
$(this).parent().parent().addClass("blue");
});
or
$("ul a").click(function () {
$(this).closest("ul").addClass("blue");
});
CSS in both cases:
.blue > a {
color: blue;
}
JSFiddle to a quite similar scenario.

menu find a child of li element with jQuery

What I need to add a class on hover to the a tag with a menu below is the menu. Any ideas?
<ul id="nav">
<li>Home</li>
<li>Another
<ul>
<li>Sub</li>
...
$("#nav li ul li a").hover(
function() {
$(this).parent().parent().parent().addClass('current');
},
function() {
$(this).parent().parent().parent().removeClass('current');
//alert();
}
);

$("#nav a").hover(
function() { $(this).closest("a").addClass("current"); },
function() { $(this).closest("a").removeClass("current"); }
);

You can achieve this without jQuery by using css psuedo classes. All elements in html gain a psuedo class of :hover when the mouse is over them.
To select them in CSS:
#nav li ul li:hover {
// Your style here.
}

This method is what you need http://api.jquery.com/closest/ god bless jQuery

Might but just quicker to do this
$(document).ready(function() {
$('#nav a:hover').parents('div > ul > li:hover > a').addClass('current');
});