The issue I'm having is, creating a submenu inside another menu.
Demo: LIVE DEMO (Important, cause CSS is needed as well
$(function () {
// Desktop Menu
var categoriesMenu = $(".list-ausbildung-categories li");
var triggerMenu = $(".dropdown-submenuSide");
var highlightsList = $(".list-ausbildung-highlights");
var submenuList = $(".list-ausbildung-submenu");
$('.list-ausbildung-categories').on('click', 'li', function () {
if( $(this).hasClass('active') ){
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
} else {
highlightsList.hide();
submenuList.show();
triggerMenu.addClass('asg-gray-bg-200');
$('li.active').removeClass('active');
$(this).addClass('active');
var subMenu = $(this).find(".dropdown-submenu").html();
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html(subMenu);
}
});
$('.asg-megamenu div[class^="col"]:first-child').on('click', function () {
categoriesMenu.removeClass('active');
triggerMenu.removeClass('asg-gray-bg-200');
submenuList.hide();
highlightsList.show();
});
});
I'm having this Bootstrap Mega Menu, which also contains a submenu (Column 2). On click, it should hide Column 3, and show the submenu items. (it does its job)
Currently, I'm grabbing the submenu content with jquery html() and then placing it on the third column (probably not the cleanest method).
The problem: whenever I close a submenu and click again, it won't open back.
It looks like currently, the active class isn't removed on the second click. Instead, it just clears out the HTML of column three. We could fix that by adding a line to remove the active class when we hide the submenu.
if( $(this).hasClass('active') ){
$(this).removeClass('active'); // add in this line here so it will trigger properly on the next click
triggerMenu.removeClass('asg-gray-bg-200');
$(".dropdown-submenuSide .list-ausbildung-submenu ul").html('');
}
Related
I'm trying to build a tricky navigation menu that needs to do the following:
When click in a nav item, .active class should be added to that item and removed from the previous one.
When one dropdown is open and you click to open another one the previous one should close and the new one should open in one click.
When click in a nav item it should open its respective dropdown container (at the moment it opens every dropdowns at once.)
and it should add .black-bg class to main-container underneath it.
When click anywhere outside the dropdown its active class .active should be removed as well as the class .black-bg in main-container underneath it.
JS
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
$(this).toggleClass("active");
$(".showup").slideToggle(200);
$(".main-container").toggleClass("black-bg");
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".showup").slideUp(50);
});
This is what I came up with so far:
SEE DEMO
See demo here
I hope the above makes sense and someone could help me as I'm really stuck with this nav.
Thank you so much!
I recommend not using jQuery for this because of the exact issues you're running into. Try using Vue or Preact
However, if you insist on using jQuery, your click function should select the item that has "active", and modify it and its siblings accordingly.
https://codepen.io/anon/pen/aGwdXO
$(document).ready(function() {
$(".click").on("click", function(evt) {
evt.stopPropagation();
if ($(this).hasClass("active")) {
return;
}
$(".active").parent().find(".showup").slideToggle(200);
$(".active").toggleClass("active");
$(this).toggleClass("active");
$(this).parent().find(".showup").slideToggle(200);
if (!$(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
$(".showup").on("click", function(evt) {
evt.stopPropagation();
});
});
$(document).on("click", function() {
$(".active").parent().find(".showup").slideUp(50);
$(".active").toggleClass("active");
if ($(".main-container").hasClass("black-bg")) {
$(".main-container").toggleClass("black-bg");
}
});
Check this. Just add class showup1, showup2, etc and data-showup="1", data-showup="2" attr in each menu item. (Working in nav items 1 and 2).
$(".click").on("click", function(evt) {
evt.stopPropagation();
var showup = $(this).data('showup');
if(!$(this).hasClass('active')){
$('.active').removeClass('active');
$(this).addClass("active");
$(".showup").hide();
$(".showup"+showup).slideToggle(200);
$(".main-container").addClass("black-bg");
});
Run
My website uses a vertical menu structure, which operates by Mouseover. Move the mouse over a menu item, the sub-menu shows. Move the mouse away from the menu item, the sub-menu hides.
Due to the fact that there are too many menu items to use the hover function properly without everything going all over the place, I need to change the menu to a click function instead. Similar to this, with a slide function also if possible: http://jsfiddle.net/ZCrk4/17/
I've tried changing the ".hover" to ".click" but that just messes the site up for some reason. Here's the code below:
jQuery(document).ready(function(){
"use strict";
jQuery('#main_menu li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
jQuery('#menu_wrapper .nav ul li').each(function()
{
var jQuerysublist = jQuery(this).find('ul:first');
jQuery(this).hover(function()
{
jQuerysublist.addClass('visible');
},
function()
{
jQuerysublist.removeClass('visible');
});
});
...
Any help is always appreciated.
Thank you.
Take a look at this, and try it:
jQuery('#main_menu li').click(function(){
var jQuerysublist = jQuery(this).find('ul:first');
if (jQuerysublist.is('.visible')) {
jQuerysublist.removeClass('visible');
} else {
jQuerysublist.addClass('visible');
}
});
I am using the foundation off-canvas menu with dropdown. Some of the items menus are not clickable but showing their submenus using this function:
$('.page-item-1765 > a, .page-item-1761 > a').click(function(e){
$(this).parent().children('ul.children').slideToggle();
e.preventDefault();
});
This works perfectly. But what I need is to have other items menu clickable, showing their submenus stayed on the dropdown opened and be able to close the dropdown afterwards by clicking a second time on the items menus.
I tried this but it doesn't work:
$('.page-item-12 > a').on('open').click(function(){
$(this).parent().children('ul.children').slideToggle();
});
I also tried:
$('.page-item-12 > a').on('close').click(function(){
$(this).parent().children('ul.children').slideDown();
});
$('.page-item-12 > a').on('open').click(function(){
$(this).parent().children('ul.children').slideUp();
});
But still doesn't work. Someone can help me on this?
try
$('.page-item-12 > a').on('click', function () {
if ($(this).css('display') == 'none') {
// your menu is closed
} else {
// your menu is opened
}
});
I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu.
Here is my fiddle: http://jsfiddle.net/58m99wf8/
What you'll notice is that if you hover on the button, the dropdown menu appears. If you leave the button it disappears which is perfect. However if you hover on the dropdown menu it still disappears and this isn't what I want it to do.
How can i prevent this?
I've seen it work like this:
if($('#menuONE').has(e.target).length === 0) {
// toggle menu to close
}
However i don't see how i can attach this to the submenu as well as the button.
What you can do is add the menu to the selector.
I also defined menu because this can refer to the button or the menu now, so traversing from there could be problematic.
var menu = $('.dropdown-menu');
$('.dropdown-hover-toggle, .dropdown-menu').hover(
function () {
//show its sibling menu
menu.stop().slideDown();
},
function () {
//hide its sibling menu
menu.stop().slideUp();
});
http://jsfiddle.net/58m99wf8/1/
Try this
var isSiblingHovered = false;
$('.dropdown-hover-toggle').hover(function () {
$(this).siblings('.dropdown-menu').slideDown();
},
function () {
var current = $(this);
setTimeout(function(){
if(!isSiblingHovered){
current.siblings('.dropdown-menu').stop().slideUp();
}
}, 50);
});
$('body').on("mouseleave", ".dropdown-menu", function() {
isSiblingHovered = false;
$('.dropdown-menu').stop().slideUp();
});
$('body').on("mouseenter", ".dropdown-menu", function() {
isSiblingHovered = true;
});
EXAMPLE
I have a responsive accordion function inside a website and i want to (open) and (close) all content with one button that also change his content name to (open) when all content is closed and (closed) when all content is open.
Also now the content that already was opened closes again when using the (open) button and the plus and minus icons don't react the right way showing the (minus icon) when the content is closed and visa versa.
Here is the fiddle
Can someone help me with this?
// Accordion //
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
})
$('.toggle-btn').click(function(){
$('.content').slideToggle();
$(this).toggleClass('active');
})
There you go:
http://jsfiddle.net/w3srayj6/21/
// Accordion //
$(document).ready(function() {
$('.header').click(function(){
$('.content',$(this).parent()).slideToggle();
$(this).toggleClass('active');
$('.toggle-btn').addClass('active').trigger("change");
})
});
$(document).ready(function() {
$('.toggle-btn').change(function(){
var headers = $('.header');
var state = 'open';
$.each(headers,function(){
if($(this).hasClass('active'))
state = 'close';
});
if(state == 'open')
$(this).addClass('active')
$(this).text(state);
});
$('.toggle-btn').click(function(){
var current = $(this);
current.toggleClass('active');
current.trigger("change");
var contents = $('.content');
$.each(contents, function(){
if(!current.hasClass('active'))
$(this).slideUp();
else
$(this).slideDown();
});
var headers = $('.header');
$.each(headers, function(){
if(current.hasClass('active'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
current.trigger("change");
})
});
// Read more //
$(window).scroll(function() {
if ($(this).scrollTop() < 20) {
$('.read-more').slideDown(200);
} else {
console.log('there');
$('.read-more').slideUp(200);
}
});
Sometimes working with toggles may be a bit tricky and confusing.
In this case I used "hasClass" in order to determine if items are already open or not.
Since we have only "opened" and "closed" states, we can say that as long that "open" is not "Active" (has class active on it), we should add the "active" class flag to all headers and contents. same in the opposite situation.
this makes sure that already toggled items are not re-toggled.
To change your minus/plus icone with your button, you must select specific .header class with parent() and child() jQuery method like this :
$('.toggle-btn').click(function(){
$('.content').each( function() {
$(this).slideToggle();
$(this).parent().find('.header').toggleClass('active');
});
});
If you check for the class active after the toggle occurs, you can then change the text of the button depending on if the toggled class is active or not.
See this updated fiddle (edited to change the icons also)