I've got an accordion menu which toggles on click.
This is the code :
$('ul.internal-nav-list li ').on('click', function () {
$(this).find('.internal-sub-list li ').toggle();
});
And the markup looks like this:
<div id="internal-nav">
<ul class="internal-nav-list">
<li><a>products</a>
<ul class="internal-sub-list">
<li>product1</li>
<li><a href="product2.aspx" >product2</a></li>
<li>product3</li>
</ul>
</li>
</ul>
</div>
Now I'm trying to enable that when an li element from the menu is open and the user clicks on another li, the open one will automatically close. Can anybody give me a suggestion on how to do this?
I'v I'm interpreting what you want correctly, try this:
var mainlis = $('.internal.nav.list > li'); // cache selector
mainlis.on('click', function(e) {
e.preventDefault();
var me = $(this);
mainlis.hide();
me.show();
});
The other existing answers come close, but it seems like what you want to do is hide the children of other menu items when the main menu items are clicked. If that is the case, the following will do:
$('.internal-nav-list > li > a').on('click', function () {
var $thisLi = $(this).parents('li');
$thisLi.siblings().find('.internal-sub-list').hide();
$thisLi.find('.internal-sub-list').show();
});
Note the first selector: this restricts the click handler to just the anchor, not the entire li. That means if they click on a child of the currently displayed main menu item, the function will not be called. That way you don't risk having a flicker as the click the submenu items...
In the handler itself, it traverses back to the parent li, finds its siblings and hides their children. Then is shows the submenu for the currently selected main menu.
Note that I took the liberty of hiding the entire ul of the non-selected menus; this should be faster than hiding each child. Perhaps not significantly, but I find it's best practice to perform these kinds of actions on the container rather than all children of the container.
The simplest solution is to close all lielements and open only the one clicked
$('ul.internal-nav-list > li').on('click', function () {
$(this).siblings('li').slideUp();
$(this).slideDown();
});
EDIT As Morfie pointed out, only the immediate children li of the internal-nav-list should be clickable, thus the > operator is used.
Thanks for the suggestions- I got it working this way in the end (in case it helps anyone)
$('ul.internal-nav-list li').on('click', function () {
$close = $(this).find('.internal-sub-list li ').toggle();
$('.internal-sub-list li').not($close).hide()
});
Related
I am building a wordpress submenu where the parent item has a compass attached to it, that rotates when the item is clicked. This works fine when it's used on the parent itself, but some items have a submenu.
So I am trying to solve it like this.
$('#menu-main-menu li.submenu li').click(function(event) {
event.preventDefault()
$('#menu-main-menu li a').addClass('disabled');
$(this).closest('.menu-item-has-children a .compass').addClass('rotate-compass');
link_href = this.href;
setTimeout(function () {
$('body').fadeOut(1000, function() {
window.location.href = link_href;
});
},500);
});
What not goes correct is the rotating part, where I attempt to add the rotate to the parent list item div. I tried it with parent, but no luck, so my second thought was to use the closest function to target it, but again no luck. What am i doing wrong here?
-edit-
I added the html structure, since i dont have a print out simply because its generated by wp, its tricky.
Assuming that the link and .compass are children of .menu-item-has-children. You would need to do the following:
$(this).closest('.menu-item-has-children').find('a .compass').addClass('rotate-compass');
Basically you need to find the ancestor and then drill down to find it's descendants as a separate query.
I have a menu selection that looks like this:
<ul class = "menu">
<li>About</li>
<li>Contact</li>
<li>Misc</li>
</ul>
I'm trying to make content associated with each of these links show on click and hide all other content. The JS I'm using looks as follows:
$('.menu li .aboutNav').click(function (e) {
e.preventDefault();
$('.wrapper').hide();
$('.misc').hide();
$('.contact').hide();
$('.about').show();});
I want to have a function like this for each menu element, but currently it isn't working for all the elements in the menu. I've looked at other threads with the same problem I'm having but none of them seem to directly apply to the way I'm doing it.
I just started learning html, js, css so I could be going about this the wrong way and that's why the other threads haven't really helped.
EDIT: Here's a pastebin of all of my HTML http://pastebin.com/FjcNXGkY
A more efficient way would be to add the same class to all links and another class to all content items...
HTML:
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Misc</li>
</ul>
<div class="menu-content about">About</div>
<div class="menu-content contact">Contact</div>
<div class="menu-content misc">Misc</div>
JavaScript:
var $content = $('.menu-content');
function showContent(type) {
// this assumes that you really must select
// the content using a class and not an ID (which you've
// referenced in the href)
$content.hide().filter('.' + type).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
// get the type to pass to showContent by grabbing
// the hash from the anchor href and removing the first
// character (the #)
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
// show 'about' content only on page load (if you want)
showContent('about');
Demo on jsbin: http://jsbin.com/hagonesuwo/edit?html,js,output
------------------------------------- EDIT -------------------------------------
I have just seen your edit with a link to your pastebin. If there is only one content item for each nav item then you can use IDs instead...
HTML:
<ul class="menu">
<li>About</li>
<li>Contact</li>
<li>Misc</li>
</ul>
<div id="about" class="menu-content">About</div>
<div id="contact" class="menu-content">Contact</div>
<div id="misc" class="menu-content">Misc</div>
JavaScript:
var $content = $('.menu-content');
function showContent(selector) {
$content.hide();
$(selector).show();
}
$('.menu').on('click', '.menu-btn', function(e) {
showContent(e.currentTarget.hash);
e.preventDefault();
});
// show '#about' content only on page load (if you want)
showContent('#about');
This would be much better as it would mean the navigation would still jump to the relevant content if JS was disabled or failed to download for any reason.
This solution assumes that the a elements will only have a single class.
$('.menu li a').click(function (e) {
e.preventDefault();
$(".wrapper,.misc,.content,.about").hide(); // Hide all.
$("." + this.className.slice(0,-3)).show(); // Show one based on the class
});
It binds the same handler to all the a elements.
When clicked, it hides all the targeted elements, and then slices away the "Nav" from the .className to create a selector to choose the one to display.
Not sure what .wrapper does, since it's not in your HTML.
You have a couple of problems with your JS:
you select items by class .misc instead of ID #misc
the way you coded the click is very rigid. Make it more elastic like:
$('.menu').on('click', 'li', function (e) {
$('article').hide();
var id = $(this).find('a').attr('href'); // $(this) is the clicked LI
$(id).show();
})
I assume all items with IDs #about, #contact etc. are simply article HTML elements and I hide them all before showing the right one. Hope this helps.
EDIT
Or even a bit more elegant hiding the other contents:
$('.menu').on('click', 'li', function (e) {
var id = $(this).find('a').attr('href');
$(id).show().siblings().hide();
})
$(".menu").children().click(function(){
$(".menu").children(function(){
$("."+$(this).attr("class").replace("Nav","")).hide();
})
$("."+$(this).attr("class").replace("Nav","")).show();
})
This would be a universal solution, considering that you can have any menu item with class "someItemNav"; if it's clicked any items are hidden and only "someItem" is shown.
I'm sorry but I just started to learn jquery and Im struggling with a most basic thing
jsfiddle : http://jsfiddle.net/ufvakggn/
Here is my function :
var active = $('nav ul li');
active.focus(function() {
$(this).children('ul').toggleClass('active');
})
basically I want to navigate with tab through my menu. I thought the best way to do this is to use a toggleclass on children element when a parent element has focus. But I can't make this work
update : actually I made some progress with
var active = $('.has-sub a');
active.focus(function() {
$('nav ul ul').toggleClass('active');
})
still trying to find a way to tab through every element and not activating all submenus when I focus something
You want to target the specific <ul> that is a sibling of the target <a>
$('.has-sub a').on('focus blur', function() {
$(this).siblings('ul').toggleClass('active');
});
Within an event handler this is the element within the selector that the event occurred on. From that element you can use whatever traverses you need to target other specific elements
DEMO
I am working on a project where the most bad thing is that I can't edit HTML code of my project. I can only edit CSS/JavaScript. My project is that I have a list of menu using <ul><li>... having sub-list also in it. The full HTML code is giving below...
<ul class="main_list">
<li class="parent">
Menu-1
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
<li>Menu-2</li>
<li>Menu-3</li>
<li>Menu-4</li>
<li class="parent">
Menu-5
<ul class="children">
<li>SubMenu-1</li>
<li>SubMenu-2</li>
<li>SubMenu-3</li>
</ul>
</li>
</ul>
This is the HTML code that I can not edit. I can only edit or add CSS/JavaScript. Here I want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu. So is there any way or solution for this...???
Update:
Keep in mind that I also want the parent menu link working too. I have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now can we add some text/icon in front of parent menu using JavaScript as I can't edit HTML?
Your click-function:
$('.main_list .parent > a').on('click', function(event){
event.preventDefault();
var href = $(this).attr('href'); // save the href for further use
$(this).siblings('.children').show(); //or whatever show-function you want to use
window.location.href = href; //if you want to user to be redirected
//OR
window.open(href,'_blank'); //for opening a new tab
});
For your second request, you can do somethin like that:
$(document).ready(function{
$('.main_list .parent').prepend('<span class="show">Show</span>');
});
then your selector in the click-handler above would be:
$('.show')
Demo
Cach your parent click event via JavaScript, then use event.preventDefault() to stop redirecting, then u can make some logic to show/hide menu items.
$(document).ready(function(){
$.each('.parent', function(){
$(this).prepend('<div class="clickableBox"></div>');
})
$(document).on('click', '.clickableBox', function(event){
//show/hide logic here
})
})
Based off of my comment above...
Append a drop down arrow next to the menu item for items with children - clicks on the parent item would navigate to it's link but clicks on the arrow would open up the submenu
JSfiddle DEMO
CSS:
ul.children {
display: none;
}
JQUERY:
$(function(){
$('li.parent').each(function(){
$(this).children('a').after('<img src="http://upload.wikimedia.org/wikipedia/commons/f/f7/Arrow-down-navmenu.png" />');
});
$('li.parent img').on("click",function(){
$(this).siblings('ul.children').toggle();
});
});
EDITED JQUERY (with arrow image toggle):
$('li.parent img').on("click",function(){
if($(this).hasClass('open')) {
$(this).removeClass('open');
$(this).attr('src','Arrow-down.png');
} else {
$(this).addClass('open');
$(this).attr('src','Arrow-up.png');
}
$(this).siblings('ul.children').toggle();
});
Updated DEMO
Since I can't see the full HTML, I'm acting like main_list is the only one.
// Get all anchors in menu
var anchors = document.getElementsByClassName('main_list')[0].getElementsByTagName('a');
// Change HREF to do nothing
for(a in anchors){
a.href = "javascript:void(0);
}
// Do other stuff
Make that code run at the end of the page after everything has loaded. Changing the href to javascript:void(0) will make there be no action.
The below works for me :)
jQuery(function( $ ){
$(document).ready(function(){
$('.main_list a').click(function (e) {
if ($(this).parent().children('ul').is(':visible') != true) {
$(this).parent().children('ul').show();
e.preventDefault();
return false;
}
})
});
});
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
});