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
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'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()
});
I have a series of custom Chevron elements that I'm going to use as buttons on my site. I've managed to set up the jQuery so that the clicked chevron/button is given a class="selected" which I then use to add custom styles. If I click any other chevron then the selected class is removed from the first chevron and added to the last chevron that was clicked. All of this works fine. I have another link that can be clicked to remove the class from all of the chevrons. What I'm trying to do now is to enable the .toggle(Class) function on jQuery so that I can also remove the class="selected" by clicking the same element twice.
My jQuery code:
$(function () {
$('#chevrons > ul > li > a').click( function(){
$('#chevrons .selected').removeClass('selected');
$('#show-all').removeAttr("style");
$(this).toggleClass('selected');
});
});
$(function () {
$('#show-all').click( function(){
$('#chevrons .selected').removeClass('selected');
$(this).css('color', '#FECF2A');
});
});
I've tried the toggle without the rows:
$('#chevrons .selected').removeClass('selected');
$('#show-all').removeAttr("style");
And it works fine. I assumed (perhaps incorrectly) that the jQuery would execute line-by-line and therefore the last thing to execute. But perhaps the first line above is removing the "selected" attribute from all of the chevrons and then the last line will only ever add the class.
What am I doing wrong here?
JSFiddle: http://jsfiddle.net/oqs4nycj/1/
Just exclude the clicked item from the class removal using not():
$('#chevrons .selected').not(this).removeClass('selected');
Applying this fix to your own JSFiddle (looks very cool by the way) you get this:
http://jsfiddle.net/qsnkqhp8/1/
JSFiddle:
http://jsfiddle.net/gopj0hyj/
Edit. I did not read the question carefully enough. Sorry. I have edited the code to deselect by clicking twice.
jQuery(function ($) {
// Variables are your friends - the $ preface tells us its a jQuery object
var $chevrons = $("#chevrons");
var $buttons = $chevrons.find('a');
var $show_all = $('#show_all');
// We bind a handler to the parent $chevrons element
// this is good for performance
// It will also bind the handler to elements dynamically added with ajax.
$chevrons.on('click', 'a', function(e){
var $old_selection = $buttons.filter('.selected');
var $clicked = $(this);
// Ensure that no button is selected
$buttons.removeClass('selected');
// Checks if button already was selected.
if ($clicked.get(0) !== $old_selection.get(0)) {
// select the clicked button
$clicked.addClass('selected');
}
$show_all.removeClass('active');
// prevents the browser from scrolling to top.
e.preventDefault();
});
$show_all.on('click', function(){
$buttons.removeClass('selected');
$(this).addClass('active');
});
});
Hi guys i have a situation like this
<div class="todos-pedidos" title="/pedidos">See More</div>
When click this div its expand my UL / LI with this jquery
$('.todos-pedidos').click(function() {
$('#bloco-pedidos-andamento ul li:hidden:lt(2)').slideToggle();
if( ! $('#bloco-pedidos-andamento ul li').is(':hidden') )
$('.todos-pedidos').html("<span class='todos-pedidos2'>See All</span>");
return false;
when there is no more LI to expand the button change the div text
so i m try for after change the text from see more to see all if the visitor clicks again this go to a url
i tried like this but i think there is some error or conflict, the link dont open
$("span.todos-pedidos2").click(function(event){
event.preventDefault();
var link = $('.todos-pedidos').attr("title");
location.href=link;
});
thanks for any help
As you are generating the element using JavaScript, you should delegate the event, from one of static parents of the element or document object.
$(".todos-pedidos").on('click', 'span.todos-pedidos2', function(event){
// or $(document).on('click', 'span.todos-pedidos2', function(event){
The click method in jQuery is intended for always-existent DOM elements. Dynamically added elements should use the on method to add event handlers:
$("span.todos-pedidos2").on('click', function(event) { });
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
});