Ok folks,
I am having some issues with producing an accordion menu with Jquery for a CMS I must use. This old CMS assigns the "active" item class in a span tag, and not the a or li ones. I need to be able to set the active tab via the code activating the span tag, and not the li anchor tag like I have already. Heres the example:
<script type="text/javascript">
$(document).ready(function () {
$('#amenu > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).next().slideToggle();
$('#amenu li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
Example output from the CMS is below:
<ul id="amenu">
<li>Home</li><li><span class="currentbranch0">
Content</span>
<ul class="multilevel-linkul-0" title="">
<li>Content 2</li>
<li><span class="currentbranch1">Content 3</span></li>
</ul>
</li>
</ul>
How would I approach tackling this problem would anyone know? I have different combinations but keep breaking the anchor link.
Also if I set the anchor active class manually on the page the accordion won't expand the children, as I will be using a CMS though this might not be that big a deal.
Any help would be appreciated
Regards
Nick
You can just add .closest('span') in places in your code that are referring to the class active:
$(document).ready(function () {
$('#amenu > li > a').click(function(){
if ($(this).closest('span').attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).next().slideToggle();
$('#amenu li a').closest('span').removeClass('active');
$(this).closest('span').addClass('active');
}
});
});
Related
I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!
You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO
USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});
Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.
Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});
I have a small query.
<ul class="navigation">
<li>Home<span class="ui_icon home"></span></li>
<li>About Us<span class="ui_icon aboutus"></span></li>
<li>Services<span class="ui_icon services"></span></li>
<li>Gallery<span class="ui_icon gallery"></span></li>
<li>Contact Us<span class="ui_icon contactus"></span></li>
</ul>
this code I got from internet, it's like on click only the page scrolls to the next content.
and the selected list item updates itself. But when I try to implement this template in my Asp.net masterpage, the list items does not get updated. so what can I do?
Any suggestion?
below is the CSS default provided by the template
ul.navigation a:hover, ul.navigation a.selected {
color: #201f1b;
background: url(../images/templatemo_menu_hover.png) no-repeat left;
}
If you want to set the class selected to the clicked anchor and remove it from other anchor, then use:
$('.navigation li a').click(function(e) {
e.preventDefault();
$('.navigation li a').removeClass('selected');
$(this).addClass('selected');
})
Fiddle Demo
If you want to use the 'on click' function to remove and add the class on elements, try the code below:
$(".navigation li a").on("click", function (event) {
//prevents the browser from going to a new URL
event.preventDefault();
//removes selected class from all elements
$('.navigation li a').removeClass('selected');
//adds selected class to element you click
$(this).addClass('selected');
});
I do not have access to your image so I used the background-color parameter in the css
jsfiddle example: http://jsfiddle.net/9Jjud/
I have a menu that looks like this:
<ul class="menu">
<li>zing</li>
<li>
page
<ul>
<li>foo</li>
<li>bar</li>
</ul>
</li>
</ul>
I'd like the sub menu to fadeIn when I hover over the page link.
This is my code so far but for some reason it's not working and I don't think this is the correct way to achieve this anyways:
$('.menu li a:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Anyone know how I can reach my goal according to best standards to make the submenu of the 2nd li to appear when I hover over page?
It would probably be a good idea to have your hovers only apply to menus that have a submenu. You could do something like this:
$('.menu > li > a').filter(function(){
if( $(this).siblings('ul').length ){ return true; }
}).hover(
function(){ $(this).siblings('ul').fadeIn(150); }
,function(){ $(this).siblings('ul').fadeOut(150); }
);
The nth-child selector needs to be applied to the <li> element not the <a>.
$('.menu li ul li:nth-child(2)').hover(function(){
$('.menu li ul').fadeIn(150);
}, function(){
$('.menu li ul').fadeOut(150);
});
Fiddle: http://jsfiddle.net/9u3V7/
Check this fiddle out: http://jsfiddle.net/vPLAc/3/
No need for counting children that way. Every list item with a submenu will react to this code.
Please help me to complete my code.
I want to hide all <li> tags on body onload.
$(document).ready(function () {
$('li > ul').hide();
});
Please give me the right variant for the code!
It's ul > li, not li > ul
$(document).ready(function () { $('ul > li').hide(); });
$(function(){
$('li').hide()
})
This will search and hide every <li> tag on the page. It is better to narrow down the search to improve performance Ex: $('#mydiv li') where mydiv is the id of the ul tag <ul id="mydiv">.
I have a list inside a li which needs to slide into view when the parent li is clicked.
My code works nicely but if i click any li all of the sub lists show where as i want it only to apply to the one that was clicked...
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
<ul id="offering">
<li class="t current"><span>sage solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="m"><span>solutions</span>
<ul>
<li>50</li>
<li>200</li>
<li>CRM</li>
</ul>
</li>
<li class="b"><span>third party additions</span></li>
</ul>
$(this).find("ul").animate({height: "toggle"}, 1000);
Here you are applying the animation to all elements that match the selector #offering ul li, when infact you just need to apply it to the child ul of the li clicked.
Instead of the following
$("#offering li").click(function() {
$("#offering li ul").animate({height: "toggle"}, 1000);
});
Try this
$("#offering li").click(function() {
this.childNodes[0].animate({height:"toggle"},1000);
});
I'm not as familiar with jQuery as I am with Mootools, so there may be a more appropriate way to get the child ul element than using the childNodes array - but you get the idea.