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
}
});
Related
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('');
}
I've built a dropdown with jQuery and some css / scss. It works at first glance, but there are always errors that I think are due to jQuery code or unnecessary CSS rules. I'm just not sure which of them ..
You can see the current status here. The said dropdown menu is the item "Leistungen" in the Navbar:
https://www.s-wat.de
Especially in the mobile viewport errors appear. If I open the dropdown here and in the opened state click on another point (for example "Kontakt") and then on "Leistungen" again, there is an unwanted fadeIn fadeOut effect. The dropdown will open and close first, before I can open it normally.
Here is my jQuery code:
(function($) {
"use strict"; // Start of use strict
// Closes responsive menu when a scroll trigger link is clicked
$('.first .js-scroll-trigger, .last .js-scroll-trigger, .dropdown-menu .js-scroll-trigger').click(function() {
$('.navbar-collapse').collapse('hide');
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeOut('slow');
}
$('.dropdown-menu').removeClass('show');
$('.dropdown').removeClass('show');
});
var navbarBehave = function(){
if ($(window).width() < 992){
$('.dropdown-toggle').click(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn('slow');
}else{
$('.dropdown-menu').fadeOut('slow');
}
});
}else{
$('.dropdown-toggle').hover(function() {
if (!$('.dropdown-menu').hasClass('show')) {
$('.dropdown-menu').fadeIn(300);
}else{
$('.dropdown-menu').fadeOut(300);
}
});
}
}
navbarBehave();
$(window).resize(function(){
navbarBehave();
});
})(jQuery); // End of use strict
I have two functions for select drop down menus, and a function for a accordion to animate when I click a title. I also want the accordion to animate when one of the options have been selected from the drop down menu.
$(document).ready(function() {
$('#accordion').find('.accordion-toggle').click(function(){
// expand or collapse this panel
$(this).next().slideToggle('slow');
// hide the other panels
$('.accordion-content').not($(this).next()).slideUp('slow');
});
$('#size').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
$('#crust').change(function(){
if ($(this).val() > 0 ) {
$('#pizza').addClass('pizzaImage');
}
});
});
what do I have to do to open the accordion not with a click but when a option is selected from the drop down menu?
The mobile menu opens and closes fine on PC. But on mobile devices the menu opens fine, but doesn't close. Can somebody take a look at my jQuery code below and make sure it is good. I am using the code on WP.
$(document).ready(function() {
$(".genesis-nav-menu > li > a").on("click", function(e) {
if ($(this).parent().has("ul")) {
e.preventDefault();
}
if (!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$(".genesis-nav-menu li ul").slideUp(350);
$(".genesis-nav-menu li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
} else if ($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
Can somebody help?
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