Understanding JQuery. Collapsible menu - javascript

I have created a collapsible menu in JQuery with the help of some coding I've found around this site.
And everything work. But now it's time for me to understand how and why it works.
The JQuery:
jQuery(document).ready(function($) {
var submenu = $('.submenu').hide();
$('.open').click(function() {
$this = $(this);
$target = $this.parent().next();
if(!$this.hasClass('close')){
$('.open').removeClass('close');
submenu.slideUp();
$this.addClass('close');
$target.slideDown();
}else{
$target.slideUp();
$this.removeClass('close');
}
});
});
The HTML and CSS are in here: JSFIDDLE!
Can someone break the code down for me, and explain what it does.
I know that it hides my .submenu class when the page loads.
And when I click the class .open the .submenu. slides down
But then I am a bit lost to what it does with my .close class.
Thanks in advance!

No problems :)
Let's start with this:
jQuery(document).ready(function($){});
this wraps around all jQuery code. it defines an anonymous function and attaches it to the event $(document).ready meaning - this code runs only after the entire DOM is loaded. This is needed because if the following code will run before the elements were loaded it will have no effect on them,
var submenu = $('.submenu').hide();
This line picks all elements with class="submenu", hides them - and returns an array of all submenus to the submenu variable. The rest of the explanation will be commented on each line:
$('.open').click(function() { // the following code will run if you click an element with class="open"
$this = $(this); // $this will hold the element you clicked
$target = $this.parent().next(); // $target will hold the next element (relevant single submenu)
if(!$this.hasClass('close')){ // if the current element is open (marked by class="closed")
$('.open').removeClass('close'); // remove the "close" class from all main menu items
submenu.slideUp(); // close all submenus
$this.addClass('close'); // add "close" class only to the clicked main menu item
$target.slideDown(); // open the correct submenu (the element after the clicked main menu item)
}else{ // if current submenu is already open
$target.slideUp(); // close it
$this.removeClass('close'); // remove class "close" from the main menu item.
}
});

When user clicks on a menu group, you need to consider two cases:
The clicked menu group is closed (i.e. it doesn't have the close class)
!$this.hasClass('close')
If so, you first have to close all open menus, and set their class accordingly:
$('.open').removeClass('close');
submenu.slideUp();
Then you can expand the clicked menu group, and mark it as currently open:
$this.addClass('close');
$target.slideDown();
The clicked menu group is already open. The only thing that needs to be done in that case is closing the menu:
$target.slideUp();
$this.removeClass('close');

Related

JQuery Accordion - how to collapse or open all of the same class name

I am using jquery accordion to place multiple accordion menus on my page.
There are many instances of these menus that are shown/hidden depending on a input selection on the same page.
When I click to collapse the accordion, I would like that accordion along with all other accordions with the same class name to collapse as well.
Vice versa for opening the accordion.
So far:
$('.accordion_class').on('accordionactivate',function(event, ui){
event.preventDefault();
event.stopPropagation();
var active = $(this).accordion( "option", "active" );
if (active === 0)
{
$('.accordion_class').accordion('option','active',true);
}else
{
$('.accordion_class').accordion('option','active',false);
}
})
Apparently, active is either false or 0 when the accordion is open or collapsed, respectively (i believe).
I have no idea if I am using event.preventDefault(); event.stopPropagation(); correctly. I would love a quick explanation.
When I use this code, it runs through each instance of the class name accordions and either opens or closes the accordion for each instance. However, since it does this for each instance, it opens and closes the menu multiple times on a single click.
How do I get it to only perform this action once?
How do I escape/break out of a jquery $(class).on('active',function(){}) whatever this is called?

Animate icon don't take his original position on toggle click

I have a accordion menu which have for each parent menu a icon, and this icon is animated with css transition and transform. I added a class with a if condition to the click event. The problem is that when I click for example on Menu1, the icon animation does very well, but if I click directly on Menu2, the menu2 dropdown appear but icon from the menu1 don't take his original position.
This problem applies to each icon in each menu/submenu, I thinks that I have a mistake in my code.
$(document).ready(function() {
// Icons effect
$('#mw_nav .toggle').click(function() {
if($(this).hasClass('rotate_close'))
{
$(this).addClass('rotate_open').removeClass('rotate_close');
}
else {
$(this).addClass('rotate_close').removeClass('rotate_open');
}
});
// Toggle Menu Items
$(function () {
$("#m_nav > ul ul").hide();
$('#m_nav .toggle').click(function (e) {
e.preventDefault();
e.stopPropagation();
var $parentli = $(this).closest('li');
$parentli.siblings('li').find('ul:visible').slideToggle(400);
$parentli.find('> ul').stop().slideToggle(400);
$(this).remove;
});
});
});
FIDDLE
Any help would be appreciated
There are 2 issues I see with your code. The first is a recommendation to NOT have $(function() { // your code }) inside of $(document).ready(). $(function() {}) is actually just shorthand for $(document).ready() so you are adding code you do not need.
The second is an issue with your logic.
$('#mw_nav .toggle') and $('#m_nav .toggle') click listeners are essentially adding a click listener on the same exact element, but both run different logic. When the $('#mw_nav .toggle') click listener is getting called it checks for a class to exist to decide what class it needs to remove and add. When $('#m_nav .toggle') click listener is getting called it calls a slideToggle function on the current nested <ul> regardless if another menu is opened or closed and there is no check in place of whether or not the rotate_open/rotate_close classes exist allowing for the classes to get swapped. There is no relation between the swapping of rotate_open/rotate_close classes and the logic that slideToggles <ul> up/down.
UPDATE
I have edited your code and made updates that will now work seen here: https://jsfiddle.net/vhfn0q5a/9/
I have added a class of .top_level to the top level items in your HTML. I use this as a way of differentiating the top level <li> from the sub menus. Next, at the end of the click event listener I check to see if the .toggle element clicked is a top level element, if so I target all top level elements that are not the current selected and make sure they have the .rotate_close class.
$(function() {}) shorthand reference
Use this code in your first click handler:
$('#mw_nav .toggle').click(function() {
$(this).toggleClass('rotate_close rotate_open');
if ($('#mw_nav .toggle').not(this).hasClass('rotate_open')) {
$('#mw_nav .toggle').not(this).removeClass('rotate_open').addClass('rotate_close');
}
});
I've updated your FIDDLE with an working example.
Cheers!

2 independent dropdown buttons

I need to achieve 2 things with these dropdown buttons DEMO
They need to work independently from one
another. So basically what I'm trying to achieve is when you click
on the first button the second button doesn't get affected and
vice-versa. On my example when you click on one button the other one
gets that border around and that shouldn't happen, it should be
completely independent.
When one dropdown is active if the second one is clicked the first
one should close automatically.
I hope my question makes sense.
Thank you all!
There is working mate: http://fiddle.jshell.net/2Yp5r/4
Basically 2 things:
Set only the clicked element as active, by using $(this) instead the general $('.clicker')
Close previous opened tabs, that's all commented below as well.
$('.clicker').click(function(e) {
//remove previously active style
$(".clicker").removeClass('active');
//check if this tab is not opened
if( $('+ ul', $(this)).css('display') == 'none')
{
//hide previous opened tab
$('.dropdown').not(this).hide();
//add style to clicked element
$(this).addClass('active');
}
$('+ ul', $(this)).slideToggle(200);
if($(e.target).attr('href') == '#') {e.preventDefault();}
e.stopPropagation();
e.stopPropagation();
});

2 separate div containers - links utilizing the same active state in 1 div container as it does in 2nd div container

I am trying to make a link in a separate div container open a panel in a completely different div container (which if you click on the second div containers link, the panel also opens and the link itself has an active state) - I got the part down where if I click on a link in the first div container, the panel opens up from the second div container, but am struggling with making that first div containers link activate the active state in the second div container.
If you take a look at the demo, simply click on the {Ñا} Members tab, as the other 2 are inactive atm...Once you click on that tab, a panel opens (not the one I am talking about though), now that; that panel is open, look at the very bottom, on the left side in the div container that holds the info title: "Official Roster", there is a link in there that says "rank", if you click on that specific link, the O.F. panel opens up like it should, however, the active state selects them all rather than just the 1 that is selected...I'm getting close, but am seriously stuck and can't seem to figure it out...
Demo: http://jsfiddle.net/Djdzw/2/
I believe it is pure javascript that would be needed, however, it could also be the css as well. I'll provide what code I have atm below, however - I'll only provide the javascript since posting all the code that is required would simply be too much. If you could simply take a look at the demo above, it might be easier on the eyes.
/* ===== The section below is what needs to be edited ===== */
$('.info_box p a').click(function () {
var a = $('#profile_list a');
$('#profile_list a').removeClass('active');
$('#profile_list a').addClass('active');
});
Im not sure if understand correct but for active button when click on #profile_list
u just need to write
$('#profile_list a').click(function () {
var a = $(this);
$('#profile_list a').removeClass('active');
$(this).addClass('active');
});
And here for second part
$('.info_box p a').click(function () {
var a = $(this).attr("href")
$('#profile_list a').removeClass('active');
$('#profile_list a[href="' + a + '"]' ).addClass('active');
});

jQuery mouseout onto anything but <ul>

So I made my own right click context menu, and I have expandable options on the right click menu when you hover over them. I want the expanded menu to close if the mouse leaves the right click menu so I used the following code:
$('ul').live('mouseout', function(event) {
// close code here
});
But the problem is the event gets called every time I move the mouse onto any of the <li> elements.
How do???
$('ul')
That means all the ul elements. May be you can give it a class (or an id) and do
$('ul.theClass')
Or
$('#ulId')
You might want to change your the code to not bind 'ul' to mouseout because the 'ul' tag would wrap the 'li' tags else nothing you do would work.
A solution for this is that you change menu option title to a div or something else while retaining the menu options as 'ul' 'li' tags
You should try in li try any one of this
$('ul li.classnameforli').bind('mouseout','mouseleave' function(event) {
// close code here
});
Or
$('ul li.classnameforli').live('mouseout' function(event) {
// close code here
});

Categories