2 independent dropdown buttons - javascript

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();
});

Related

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!

Once menu item is clicked, close menu and revert the classnames & jquery

Ok... So I have this drop down menu working as I'd like... however I'm trying to figure out how to revert the function back to it's original state after a menu item is clicked.
So first when you trigger the function it does & works great the following:
It swaps out .menu_hide and .lockscreen for .menu_show and .lockscreen_on.
// show and hide mobile menu
$('#triggerMobileMenu').click(function(e) {
e.preventDefault();
// Toggle all 4 classes off or on
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
But now I'm trying to add another piece that says once a menu item is clicked, close the menu and swap the classes back to their original state from .menu_show and .lockscreen_on, to .menu_hide and .lockscreen_off.
$('#mobileMenu ul li a').on('click',function(){
$('#mobileMenu').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#mobileScreen').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});
});
I should also note that on the same page a scroll to id# may be happening vs just simply taking you to the new url/page. Either case will happen though.
I think that you're making this too complicated. Use the same event handler for both a#triggerMobileMenu and ul#mobileMenu li a since you're having them do the same thing (toggle the visibility of the menu and another element).
$('a#triggerMobileMenu, ul#mobileMenu li a').on('click', function(evt){
evt.preventDefault();
$('#mobileMenu').toggleClass('menu_hide menu_show');
$('#mobileScreen').toggleClass('lockscreen_off lockscreen_on');
});
If you need to know which element was clicked in the event handler, evt.target is available:
if( $(evt.target).is($('a#triggerMobileMenu')) ) {
// do stuff
}
See http://jsfiddle.net/Mph6t/3/
I think it is working as intended. I had to fix some id names that may have been switched in the translation to jsfiddle. Here's a working one as far as I can tell. This leaves the somename2 div still showing. I assume that is going to be blank and just for locking the screen right?
I also changed the link to a new tab for testing purposes. FYI.
Relevant changes are:
$('#somename1 ul li a').on('click',function(){
$('#somename1').toggleClass('menu_show menu_hide')({ autoCloseOnClick: true });
$('#somename2').toggleClass('lockscreen_on lockscreen_off')({ autoCloseOnClick: true });
});

Drop down only one menu at a time

So far I have this drop-down menu. When I click on either "Menu", "Menu1" or "Menu2", the links under it will drop down.
The problem:
I need to display only one drop-down at a time, so that the user can switch between them.
I tried to apply css('overflow', 'hidden'); to the menu currently dropped down, but it won't work, since the overflow: visible !important; is applied to the .clicked class.
Please help, anything will be highly appreciated!
Try when you click on a element remove class clicked from all elements and add class clicked to the element that is clicked
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});
DEMO
UPDATE
If you want also on second click menu to be closed try checking if clicked item has already class clicked:
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
if ($(this).hasClass('clicked')) {
$(this).removeClass('clicked')
} else {
$("#product-menu>ul>li").removeClass('clicked');
$(this).addClass('clicked');
}
$('.productSubmenu').width(menuWidth);
});
DEMO2
You also might want to close the links
$("#product-menu>ul>li").click(function () {
var hidden = $(this).find('.clicked');
$("#product-menu>ul>li").removeClass('clicked');
$("#product-menu .productSubmenu2").hide(); // this one I added
$(this).addClass('clicked');
$('.productSubmenu').width(menuWidth);
});

Understanding JQuery. Collapsible menu

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');

One click - two functions

I'm doing a site for a kiosk, so the site goes like a photoslide in-between each div.
I put a layover/mask on the first page, and the layover/mask is removed on a mouse click function at the moment. (As a side note this is for the purpose of hiding the address bar on the first screen for the kiosk as the first page/div is an a tag)
$("#item1").append('<div id="pageLayover"></div>');
$(document).click(function(){
$("#pageLayover").remove();
});
Everytime you click your mouse to remove the layover then you need to click another time then the first a tag page will slide to the second page.
Is there any way I can have one click only not two to remove layover/mask and to let first page to slide to the second page at the same time?
Here is my code on jsFiddle Any code/links/examples would be great help.
Thanks in advance!
Your question is very confusing, but maybe this is the answer you're looking for:
To make the click on the layover in fact two clicks, you can simply trigger the click event of the first panel:
$('#pageLayover').live('click', function(e) { // <-- updated!
$("#pageLayover").remove(); // remove our layover from the DOM
$panels.eq(0).click(); // <-- trigger click event of 1st element of $panels
});
This does not check if the click occurred on the panel though.
You can solve the problem with the multiple layovers with this:
$('#wrapper').scrollTo($(this).attr('href'), 800,{
onAfter: function(id){
if ($('#pageLayover').length == 0) { // <--- new
$("#item1").append('<div id="pageLayover"></div>');
} // <--- new

Categories