.each() on JQuery Dropdown - javascript

I'm trying to create a JQuery Dropdown similar to the one used in bootstrap.
The problem which arises is that when an individual list item is clicked, all sub navigation's display block.
Now I know this issue can be resolved with .each() but my code does not seem to work.
Please find the example here; http://jsfiddle.net/N7xgC/
Apologies if this question has already been asked before.
B

Try this modification:
http://jsfiddle.net/N7xgC/1/
$(function() {
$('.main > li > a').each(function() {
$(this).click(function() {
// When the anchor is clicked, find the next .sub element and toggle it
$(this).next('.sub').toggle();
});
});
});
I changed yours to toggle the element with the class .sub 'next' to the clicked anchor.

You cannot select all .sub and toggle them. You need to get only the one next to the a-element that is clicked.
Try this instead:
$(this).next(".sub").toggle();
Updated your fiddle so you can see it in action: http://jsfiddle.net/N7xgC/3/

$('.main li a').on('click', function() {
$(this).next('.sub').toggle();
});
JSFiddle Demo

Related

jQuery program not working

I am having a problem using jQuery, merely due to inexperience using it. My program is meant to give the CSS class current to the links in my navbar if they are clicked, and remove the class from the previous owner of it.
Keep in mind I am very inexperienced in javascript, only picking it up in a few minutes for the sake of a school assignment.The script is simply not doing anything.
My Code:
$(document).ready(function() {
$('a').click( function(i){
var $current = $('a.current');
$(this).addClass('current');
$current.removeClass('current');
});
});
Edit 1: Strange bug, current class is applied to the whole document if I do not click a link, but instead click the document.
You should first remove the class, and then add it. Otherwise you will not have a class added if you click an anchor twice.
$(function() {
$('a').click(function() {
$('a.current').removeClass('current');
$(this).addClass('current');
});
});
Try this:
$current.removeClass('current');
$(this).addClass('current');
You need to first remove the active class, then add the current class for the current element.
You need to narrow down your code to only affect the links in the nav bar, as currently, you are targetting all <a> tags.
var navLink = $('.nav a');
navLink.on('click', function(e){
navLink.removeClass('current');
$(this).addClass('current');
});
In this code, the variable gets all instances of the nav links, and if one of them is clicked, will remove the current class from all of the links before adding it onto the one that was clicked.
This jsfiddle will show you it in action: https://jsfiddle.net/td48vcqy/

Toggling show/hide anchored divs

I have a list of Services with their respective descriptions, which I have linked to with anchor links.
The service details are hidden until I click on a service name. I am not being able to hide the previously clicked on services, they are overlapping.
This is a JSFiddle of what I have been able to put together so far:
https://jsfiddle.net/rdhn60mb/
$('#home-header .service-box li a').click(function() {
$($(this).attr('href')).css('display', 'block');
});
/*
$("#home-header .service-box li a").click(function(){
var $name = $(this).text();
var $activebox = ($("#" + $name).length === 0) ;
$("#home-header .service-details").not($activebox).hide();
$("#home-header .service-details").not($activebox).removeClass('active');
$activebox.toggle();
$activebox.toggleClass('active');
});
*/
(The commented out code doesn't work, but it's close to what I'm trying to achieve).
Thank you all for helping me out!
Cintia
I would agree with divy3993's answer but improve it slightly:
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).toggle();
});
The toggle is just a more efficient function in this case.
You can see the example in this Fiddle: https://jsfiddle.net/rockmandew/rdhn60mb/6/
See in your case it's overlapping, as you never close/hide them. So as JavaScript/JQuery runs line by line. We will first close/hide all of them $('.service-details').hide(); onclick and then open/show only the current one.
JQuery
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).css('display', 'block');
});
UPDATE :
Fiddle : Demo
Note: Here in demo i used fadeIn() so it has some smoothing effect. Also using anything else like toggle() is useless. As you are hiding all the service-details before showing so no need of toggle().
To close the div again if the same link is clicked like you wanted.. simple wrap it in an if statment checking if the current active tab has the same id as the href value. If so don't run the show
//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {
//remove the current active class
$('.service-details').removeClass( "active" );
//fade in the div
$($(this).attr('href')).fadeIn();
//add the class active to the div
$($(this).attr('href')).addClass( "active" );
}
Here is a jsfiddle with the edits and I also added a fadeout to make it less jumpy
https://jsfiddle.net/rdhn60mb/21/

adding and remove classes on click events

I am working on a click event, which intially is pretty standard.
on.click: Remove the active class from all list items, then add active to the clicked list item.
ie
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
li.addClass('active');
});
Works as expected. However, I also need a condition that if the active class is clicked again, it will remove the active class from the clicked item.
I tried this:
$('.child-item').toggle(function(e){
$('.child-item').removeClass('active');
$(this).addClass('active');
}, function() {
$('.child-item').removeClass('active');
$(this).removeClass('active');
});
but often the toggle is in the off state, so it requires a double click to get the toggle back on track. This seems like it would be a pretty straightforward solution, but I cannot seem to get it to work.
Added a jsFiddle here with another option. This is fine for when the same element is clicked, but it doesn't clear all active classes on each click.
Update
I got it working but TrueBlueAussie's answer is shorter and better. Here is my working fiddle:
https://jsfiddle.net/v7b8cbj5/
Your second click handler will only attach to matching "active" items when the event was registered.
Replace it all with just this:
$('.child-item').click(function(e){
$('.child-item.active').not(this).removeClass('active');
$(this).toggleClass('active');
});
You can use not() to exclude the current item from selected list of things to make inactive, then just toggle the selected one.
JSFiddle: https://jsfiddle.net/81ex7dmm/2/
.toggle() (Event) - is deprecated in jQuery 1.8 and removed in jQuery 1.9
Use add() with toggleClass() on .active <li>
$('.child-item').click(function(e){
$('li.child-item.active').add(this).toggleClass('active');
});
Updated Fiddle
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
$(this).toggleClass('active');
});
Try it also :
$('.child-item').click(function(e){
$('.child-item.active').removeClass('active');
$(this).addClass('active');
});
FIDDLE DEMO

Simple issue with jQuery Accordion

I have a simple jQuery accordion which works... almost perfectly :)
As you can see from the demo, I currently have the navigation "open" as I'm in the "Team" page.
Is it possible when I click 'About Us', it closes the element altogether. As you can see from the demo it closes it, but then quickly re-opens it. I guess this occurs because of the code on line 27 of my CSS.
Here is my demo: http://jsfiddle.net/URYzK/5/
Here is my JavaScript:
jQuery(function($) {
$('#accordion > li > a').click(function (e) {
if ($(this).next('ul').length == 0) {
// link is for navigation, do not set up accordion here
return;
}
// link is for accordion pane
//remove all the "Over" class, so that the arrow reset to default
$('#accordion > li > a').not(this).each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
$(this).siblings('ul').slideUp("slow");
});
//showhide the selected submenu
$(this).siblings('ul').slideToggle("slow");
//addremove Over class, so that the arrow pointing downup
$(this).toggleClass($(this).attr('rel') + 'Over');
e.preventDefault();
});
});
Many thanks for any help here.
Remove display:none from #accordian ul and remove the .children CSS entirely. I believe this creates the behavior you want. You were setting the children ul to be display:none, and then trying to force .children, which is a ul, to be display:block later, which is why they were fighting.
Updated your jsFiddle as well.

How do I remove something I previously added with .after(content) in jQuery?

What I'm trying to do:
Take a nav item - when it's clicked, add a "<" out to the side of it.
Then when something different is clicked, I'd like to remove the "<" that I just added, so the newly selected item is the only item with the "<" next to it.
Simplified code:
$('.sidebar a').click( function() {
//-->here I need to clear it off of any other items which have it
$(this).after(' <');
});
(Incidentally, I recognize that I could do something with css, but that won't work in this instance. Needs to be js.)
Here's the code
$('.sidebar a').click( function() {
//Remove if there are any currently on the page
$("#remove_later").remove();
//Add to the link user just clicked onto
$(this).after('<span id="remove_later"> <</span>');
});
Here's the jsfiddle link http://jsfiddle.net/MHhp4/
what about
$('.sidebar a').click( function() {
//-->here I need to clear it off of any other items which have it
$(this).after('<span id="remove_later"> <</span>');
});
and remove it with
$("#remove_later").remove();
?

Categories