i use the followig accordion menu:
function initMenu() {
$('#submenu ul').hide();
//$('#submenu ul:first').show();
$('#submenu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#submenu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() { initMenu(); });
now, when a link in the #submenu list gets active, the accordion closes and i have to open it up again when chooseing another link from the #submenu. my question: how can i tell this script, that when a li in the #submenu list has the class .active_link, the accordion opens automatically that current ul #submenu list?
the .active_link class is only set, when the link is active!
you understand my question? :)
thanks and regards!
Try triggering a click on it when the dom is ready:
$('#submenu li a.active_link').click();
Related
i have hamburger menu, which i've done an accordion type submenu using jquery. Though it's only for devices which are 1084px and smaller.
Otherwise the menu uses a hover style submenu on desktop.
Though for some reason, using both of these techniques (hover using css, and the accordion using jquery) is not working.
So i had resulted in adding media queries to the jquery, which had allowed the hover and accordion to work.
BUT
Once the accordion is pressed, it opens and closes multiple times by itself, which is wrong and therefore not functioning properly.
Can anyone help me out please, this problem only happens once i add the media query to my Jquery.
jQuery(document).ready(function($) {
$(window).resize(function() {
if ($(window).width() < 500) {
function initMenu() {
$('#nav ul').hide();
$('#nav li a').click(
function() {
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
$('#nav ul:visible').slideToggle('normal');
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
removeActiveClassFromAll();
$(this).addClass("active");
$('#nav ul:visible').slideToggle('normal');
checkElement.slideToggle('normal');
return false;
}
if ($(this).siblings('ul').length == 0 && $(this).parent().parent().attr('id') == 'nav') {
removeActiveClassFromAll();
$(this).addClass("active");
$('#nav ul:visible').slideToggle('normal');
return false;
}
}
);
}
function removeActiveClassFromAll() {
$('#nav li a').each(function(index) {
$(this).removeClass("active");
});
}
$(document).ready(function() {
initMenu();
});
$('#nav').click(function(e) {
e.stopPropagation();
})
$(document).click(function() {
$('#nav').children('li').each(function() {
if ($(this).children('ul').css('display') == 'block') {
$(this).children('ul').slideToggle('normal')
$(this).children('a').removeClass('active')
}
})
})
}
});
});
here is a jsfiddle https://jsfiddle.net/kjm58tah/
thank you in advance
if (window.matchMedia("(max-width: 500px)").matches) {
}
this will work, however you need to refresh the page to make it work..
JSFiddle
http://jsfiddle.net/5rkrq4bw/strong text
JQuery Code
// Side Menu Starts
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
if(!$(this).hasClass('Active')) {
if(!$(this).parent().parent().hasClass('Active') && $(this).next().hasClass('sub-menu')) {
$(this).next().slideToggle();
$(this).addClass('Active');
} else {
$('.SideNav .Menu li ul').slideUp();
$(this).next().slideToggle();
$('.SideNav .Menu a.MenuDrop').removeClass('Active');
$(this).addClass('Active');
}
}
});
//Side Menu Ends
The Problem
Trying to integrate multiple tiers I am finding the problem of only being able to have one open at a time and checking to see if any others are open to close them.
What should happen
Demo
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Category
Sub-Cat
Link
Link
Link
Sub-Cat
Link
Link
Link
Explanation
Only one 'Category' to be expanded at a time
Only one 'Sub-Cat' inside to be expanded at a time
Adding / removing of 'Active' class.
Resolved: http://jsfiddle.net/wo4sj4pt/
JQuery Code:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = $('.Active');
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
if (!effect) {
$(el)
.toggleClass('active')
.parent('li')
.siblings()
.find('a')
.removeClass('active')
.parent('li')
.children('ul, div')
.slideUp('fast');
}
$(el)
.siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
Usage:
Link to JQuery and the above script
Make a multi-level list
Give your list a class/ID name such as '.SideNav'
Tell the script this is your accordion $('.SideNav').accordion();
http://jsfiddle.net/sabithpocker/5rkrq4bw/2/
$('.SideNav .Menu a.MenuDrop').click(function(event){
event.preventDefault();
console.log(this);
var subMenuToExpand = $('ul.sub-menu', $(this).parent());
var otherVisibleSubMenu = $('ul.sub-menu:visible', $(this).parents('.Menu'));
otherVisibleSubMenu.hide();
subMenuToExpand.show();
});
$('.SideNav .Menu a.MenuDrop').click(function(event){
$('ul.sub-menu:visible', $(this).parents('.Menu')).slideUp(50);
$('ul.sub-menu', $(this).parent()).slideDown();
});
I'm just begin learn js, and have a problem.
This sidebar menu.
http://jsfiddle.net/q8b041s5/
How i can get visible display block, if line <li> or <ul> is active?
Tis need, when go to link, sidebar menu was in the same place of click.
(function ($) {
$(document).ready(function () {
$(document).ready(function () {
$('#cssmenu > ul > li ul').each(function (index, e) {
$(e).closest('li').children('a');
});
$('#cssmenu > ul > li > a').click(function () {
$('#cssmenu li').removeClass('active');
$(this).closest('li').addClass('active');
var checkElement = $(this).next();
if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
return true;
}
if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#cssmenu ul ul:visible').slideUp('normal');
checkElement.slideDown('normal');
}
if ($(this).closest('li').find('ul').children().length == 0) {
return true;
}
return false;
});
});
});
})(jQuery);
Not sure that I understood correctly but in common case you can emulate clicking on menu when you need it (for example when page loaded):
$('#cssmenu > ul > li > a').click();
So I have this code from a previous question: http://jsfiddle.net/928Dj/4/
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
});
I was wondering if anyone could tell me how I allow it to still be toggled open and closed, but also make it so if one menu is open and I click to open another menu, it closes the first one, meaning only one menu can be open at any time.
Try to hide the opened ul elements first and then toggle the current element,
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function (e) {
var cache = $(this).next('ul');
$('#filter ul:visible').not(cache).hide();
cache.toggle();
});
DEMO
You can hide all the visible submenus before showing the current one as follows
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
var ul = $(this).next('ul');
$('ul li ul:visible').not(ul).hide();
ul.toggle();
});
Demo
This is the best way. You can also try this:
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
$(this).next('ul').toggle();
$(this).parent().siblings().find('.opt').hide();
});
Fiddle
So I have some dropdown menus, and I listen for the touchstart event to show them, but the problem is that I don't know when to close them, since I have 2 dropdown menus on the page the problem is that..if a user clicks on a dropdown menu and I display it and after that clicks on another...that gets displayed to.
$(document).ready(function() {
$('nav ul li.sub-menu > a,nav ul li.sub-menu2 > a').bind( "touchstart",function(){
$(this).parent().find('ul').toggle();
$(this).parent().addClass('active_page');
});
});
Any ideas how to close it, when it's best to close it? :-?
The solution was to add an overlay div with position absolute.
$(document).ready(function() {
$('nav ul li.sub-menu > a,nav ul li.sub-menu2 > a').click(function(){
$(this).parent().find('ul').toggle();
$('body').prepend('<div class="overlay" />');
$('.overlay').css({'width' : $('body').css('width'), 'height' : $('body').css('height')});
$(this).parent().addClass('active_page');
return false;
});
$('.overlay').live('touchstart',function(){
$(this).remove();
$('.drop').each(function(){
if($(this).find('ul').css('display') == 'block')
{
$(this).find('ul').toggle();
}
});
//$('nav ul li.sub-menu2 > ul,nav ul li.sub-menu > ul').toggle();
return false;
});
});