Develop Reference

If element has class add class to another element

Not sure if I'm doing this right. I have a menu that toggles between open and close. Now I want a button to show up if the menu hasClass("open");. and I would like to remove the class once the class open is gone.
Here is the HTML part;
<nav>
<a class="closed"><i class="fa fa-bars"></i>Menu</a>
<ul>
<li>Menu items</li>
</ul>
<div class="close-btn">
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</nav>
The HTML works, so this is not that important, the important part is that the elements are: nav, a, closed.
Now for the jQuery part;
$(document).ready(function(jQuery) {
if ($("nav a").hasClass("open")) {
$(".close-btn").addClass('show-me-the-button');
} else {
$(".close-btn").removeClass('show-me-the-button');
}
});
But this doesn't work. I've searched stackoverflow but all gave me this code... not sure why it isn't working. I get no script errors... any help?

You check classes only on initial page load. Where do you change open class? You should move this code in that place.

User - oryol is correct
Try to put your code inside a handler like this:
$(document).ready(function(jQuery) {
$('nav a').on('click', function(e) { // <----------- Click Handler (jQuery)
// Use $(this) to access current clicked element
if ($(this).hasClass("open")) {
$(".close-btn").addClass('show-me-the-button');
} else {
$(".close-btn").removeClass('show-me-the-button');
}
})
});
See more about Click Handler in jQuery
Hope this helps!

jQuery handling of click event on checkbox nested inside <li> and <a> elements while leaving parent <ul> open

This seems like a simple issue but it is frustrating me. I want to be able to click multiple items in a dropdown list that contains checkboxes without collapsing the list. I've tried a variety of event handlers on the ul, li, and a elements with no luck. These include e.preventDefault(), e.stopPropogation(), and preventing the closing of the ul through the 'hide.bs.dropdown' event as per this answer.
My list items:
<li class="serviceListItem">
<a class="serviceListItemLink">
<input class="checkService" type="checkbox" value="">
</a>
</li>
and my current set of event handlers. I've tried most combinations of these.
$('#serviceDropdown').on('hide.bs.dropdown', function() {
return false;
});
$('.serviceListItemLink').click(function(e) {
console.log('you clicked a service');
e.stopPropogation();
e.preventDefault();
});
$('.serviceListItem').click(function(e) {
e.stopPropogation();
e.preventDefault();
});
I should add my UL has the #servicesDropdown ID. Thanks for all your help in advance SO.

Is that the code you have tried? In that case, you have misspelled "propagation".
It should be:
e.stopPropagation();
...and not:
e.stopPropogation();

JQuery change class when a link is clicked

I'm new to JQuery, I know this question is already answered in other posts but please help me on this,
How can i change the class of <li> tag if a link <a> is clicked?
<li class="link" id="home" >
Home
</li>
<li class="link" id="flt" >
FLT
</li>
This is what i have tried so far:
$('li').click(function() {
$("li.active").removeClass("active");
$(this).addClass('active');
});
Please explain me the answer, other posts that is similar to mine doesn't have that much detail so i really don't understand how they do that?

When you click on the element, the actual click target is the a element whose default action is to navigate to the resource specified in the href property.
In this case you are registering the click event in the li event, this handler is getting triggered because of event bubbling where an event happening in a descendant element will get bubbled upto the document root.
So the solution here is to prevent the default action of the click event(in this case the navigation of the a element) by calling the .preventDefault() on the event.
var $lis = $('li').click(function(e) {
$lis.filter(".active").removeClass("active");
$(this).addClass('active');
e.preventDefault()
});

Use the following script. http://jsfiddle.net/czG8h/
$('.link a').click(function() {
$("li.active").removeClass("active");
$(this).closest('li').addClass('active');
});
If you want to persist the active style across the page, then following code will do the trick for you:
$(document).ready(function() {
var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");
///// Apply active class to selected page link
$('.link a').each(function () {
if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
$(this).closest('li').addClass('active');
});
});

Use .closest to get to parent li and add the class active then use siblings to find other li and remove the class active, and use e.preventDefault() to prevent changing page.
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});
DEMO

Bootstrap dropdown closing when clicked

I put a form inside a bootstrap dropdown, but when I click any of the fields in the form, the dropdown goes away. I have this piece of code but I don't know where to put it to prevent the dropdown disappearing.
$(function test() {
// Setup drop down menu
$('.dropdown-toggle').dropdown();
// Fix input element click problem
$('.dropdown input, .dropdown label').click(function(e) {
e.stopPropagation();
});
});
Could someone please tell me where I should put this? I tried in the bootstrap-dropdown, I tried within the HTML but it still doesn't work.

You can omit the dropdown call all together, the bootstrap dropdown works without it. Make sure you're wrapping your script properly, you can include it on the header or body of your page, although personally i prefer placing it on the body of your page.
JS
<script type="text/javascript">
$('.dropdown-menu input, .dropdown-menu label').click(function(e) {
e.stopPropagation();
});
</script>

If you want to stop closing only some of dropdown menu, not all of them, then just add an additional class to your ul block:
<ul class="dropdown-menu keep-open-on-click">
And use this code:
$(document).on('click', '.dropdown-menu', function(e) {
if ($(this).hasClass('keep-open-on-click')) { e.stopPropagation(); }
});

Time passed since answer had been accepted, but if you want to keep the dropdown opened, if it acts like a kind of dialog, the best way i think is:
$('.dropdown').dropdown().on("hide.bs.dropdown", function(e) {
if ($.contains(dropdown, e.target)) {
e.preventDefault();
//or return false;
}
});

You need to stop event from bubbling up the DOM tree:
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
event.stopPropagation prevents event from reaching the node where it's eventually handled by Bootstrap hiding menu.

This works for my (lateral sidebar opening a simple link with bootstrap toggle)
$('.dropdown').find("a").not('.dropdown-toggle').on("click",function(e){
e.stopImmediatePropagation();
});

Thank you for the above answer, I was having the same issue w/ submenus under the dropdown menus. Using the above solution I was able to solve the problem for this as well.
$('.dropdown-menu .dropdown-submenu a[data-toggle="dropdown-submenu"]').click(function (e)
{
e.stopPropagation();
});

Simply use this example.This solution works for me.
<script type="text/javascript">
window.addEvent('domready',function() {
Element.prototype.hide = function() {
$(function () {
// replace your tab id with myTab
//<ul id="myTab" class="nav nav-tabs">
$('#myTab li:eq(1) a').tab('show');
});
};
});
</script>
Hope it'll help. Thanks.

Put
<script type="text/javascript">
$('.dropdown-menu').click(function(e) {
e.stopPropagation();
});
</script>
on the original answer, remove all the classes, and just put the ".dropdown-menu" class, it worked for me.
i have an input field inside the dropdown menu.

If you look to the bottom of sources of dropdown widget, you will see this:
$(document)
.on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
e.stopPropagation()
})
So you have the following choices:
Simply wrap yor dropdown with form
Or you can add event listener for click event of .dropdown YOUR_SELECTOR
$(document)
.on('click.my', '.dropdown some_selector', function(e) {
e.stopPropagation()
})

jQuery tab and tab content show up when clicked ?

My webpage is at http://www.sarahjanetrading.com/js/resume
All the HTML, CSS and jQuery code + images are available there for anyone to access.
My issue is that currently my jQuery code makes the tabs show the tab-content when I click on the achor tag of the tab. But the tab doesnt change into the clicked tab.(tab name remains the same).
And the tab changes into the clicked tab when i click on the respective li of the tab. What I want is that both the tab changes and the content of the tab shows when I click on the either the li of the tab or the anchor of the tab.

You have two lots of events registered. One on the anchors and the other on the lis. The one on the lis changes the active state for the tabs themselves while the one on the anchors change the content. You should combine these into one function.
You change check the li function is working by clicking on the very bottom edge of it. Because your anchor javascript has a return false feclaration it is preventing the click event bubbling up to the li, thus not showing the change.

Try changing the function:
$("ul.tabs li a").click(function() {
$("ul.tabs li > a").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
to the following:
$("ul.tabs li a").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
$("#wrap > div").hide();
$(".active-tab").removeClass();
$(this).parent().addClass("active-tab");
var activeTab = $(this).attr("href");
$(activeTab).show();
return false;
});
This should work and you should be able to remove your other javascript function.

If you already use jQuery you can use the jQueryUI library to create tabs. It is very simple and the style can easily be changed. Here is the Tutorial for tabs:
jQuery UI - Tabs Demo

If you click the whitespace around the text in the tabs, it works. Remove the anchor link from inside the tab, or add a click handler for the anchor link.
Edit:
My mistake. You have a click handler on your anchor element, but clicking the anchor link causes it to become $(this) in your code. So you assign class="active" to the anchor, when you want to assign it to the li.
$(this).addClass("active");
should be rewritten to modify the li. Personally, I would wrap the li in the anchor link:
<li></li>
This will probably require modifying your JS code a little, but will give a uniform result.