HTML:
<li class="page_item ">
A
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
</ul>
</li>
<li class="page_item ">
B
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
<li class="page_item ">
C
<ul class="children">
<li class="page_item">1</li>
<li class="page_item">2</li>
<li class="page_item">3</li>
<li class="page_item">4</li>
</ul>
</li>
JS:
$('.page_item').click(function() {
var that = this;
$('.page_item').each(function() {
if (that == this) return true; //continue
$('.children:not(:hidden)', this).slideToggle();
});
$('ul.children', this).slideToggle();
});
Online demo: http://jsfiddle.net/kHLuR/1/
How can I make the first section li opened by default?
Variant #1 Pure CSS solution:
.page_item:first-child .children {
display: block;
}
Demo: http://jsfiddle.net/dfsq/kHLuR/7/
Note: :first-child works in IE8+. If you need to support older version you can give another class to your first li, e.g: <li class="page_item page_item-first"> http://jsfiddle.net/dfsq/kHLuR/9/
Variant #2. Trigger click event on the first .page_item:
$('.page_item').click(function () {
// ...
})
.filter(':first').click();
Demo: http://jsfiddle.net/dfsq/kHLuR/8/
Add this code to simulate a click event when the page is loaded: LIVE DEMO
$(document).ready(function () {
$('a').eq(0).trigger('click');
});
You can use jQuery's .ready() to execute code immediately after the page loads.
Take a look at http://api.jquery.com/ready/
Related
I have a question on Jquery. If I click on Link1, which does not have any ul.children and the class current_page_item will be added(not shown in this code as it will be added automatically by Wordpress), then ul.children in Link2 should be hidden.
If i click on Link 2, which will have both class page_item_has_children current_page_item, in this case ul.children should be shown. I have tried my code bellow, which is i know it is absolutely wrong. Please give me your advices. Many thanks.
if($(.navigation).hasClass(page_item_has_children)){
(.navigation .page_item_has_children .children).hide();
}else if( $(.navigation).hasClass(page_item_has_children) && $(.navigation).hasClass(current_page_item)){
(.navigation .page_item_has_children .children).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3</li>
<li class="page_item ">Link4</li>
</ul>
</li>
</ul>
This solution is a bit more towards your scenario (edited based on comment):
$(".navigation li").on("click", function() {
if ($(this).hasClass("page_item_has_children") && $(this).hasClass("current_page_item")) {
$(".navigation .children").show();
} else {
$(".navigation .children").hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item links">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
How about simply hiding all nested UL elements, then simply showing the children of the clicked one?
$(".navigation li").each(function() {
// When we first load, hide all nested menus.
$(this).children("ul").hide();
if (localStorage.menuNumber) {
$(".navigation li").eq(localStorage.menuNumber).children().show();
}
})
.on("click", function() {
// When any top-level ul is clicked, hide the
// nested menus then show the current one.
$(this).parent().children().find("ul").hide();
$(this).children().show();
// We also want to persist this selection,
// should the user refresh...
localStorage.menuNumber = $(this).index;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="navigation">
<li>Link1
</li>
<li class="page_item_has_children current_page_item">Link2
<ul class="children">
<li class="page_item">Link3
</li>
<li class="page_item ">Link4
</li>
</ul>
</li>
</ul>
Edited it so that when it initially loads, all nested uls are hidden. Hope this helps! And edited again, to store the clicked menu in local storage. Sadly, for security reasons, this won't work here. See it as a fiddle: https://jsfiddle.net/snowMonkey/fnuvvLwb/
I have this function that expands the <ul> and hides it after it is pressed.But when i press on <li> it will also close or expand. How do I make it to toggle only when the the <h4> is clicked ?
$('.category ul').hide();
$('.sub').click(function() {
$(this).find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
Thanks in advance.
Changes made
► changed $('.sub').click(function() { to $('.sub h4')
► changed $(this).find('ul') to $(this).next()
Working Demo
$('.category ul.archive_posts').hide();
$('.sub h4').click(function() {
$(this).next().slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>
Change the binding to the h4, then target the next ul.archive_posts for sliding.
$('.category ul').hide();
$('h4').click(function() {
$(this).next('ul.archive_posts').slideToggle();
});
See it working in this JS Fiddle: https://jsfiddle.net/rwvdf8ys/1/
Hope that helps.
The problem is $('this').find('ul').slideToggle();
'this' represents the obj that is cals the function. In this case it is h4. H4 has noe ul, so you cant find it. but you can find ul on $('.sub')
Here is ann example
$('.category ul').hide();
$('h4').click(function() {
$('.sub').find('ul').slideToggle();
});
<ul class="category text-center">
<li class="sub">
<h4 id="foo"><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans</li>
<li class="posts">Adding new licence</li>
<li class="posts">Updating licence</li>
<li class="posts">Removing licence</li>
</ul>
</li>
</ul>
js fiddle:
https://jsfiddle.net/8hvc4cfh/
You might use the siblings('ul') selector to find and close the neighbour ul. While $(".sub h4") limits the clickable elements to your h4.
$('.category ul').hide();
$('.sub h4').click(function() {
console.log('test');
$(this).siblings('ul').slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="category text-center">
<li class="sub">
<h4><b>Licenses</b></h4>
<ul class="archive_posts">
<li class="posts">Licence types and users plans
</li>
<li class="posts">Adding new licence
</li>
<li class="posts">Updating licence
</li>
<li class="posts">Removing licence
</li>
</ul>
</li>
</ul>
You can try this.
$('li.sub h4').click(function() {
$(this).next().slideToggle();
});
I try to get an accordion like functionality, I have only <li>with classes .level1, .level2, .level3 ..etc, the issue I have is , if I click on .level2, items will hide until next .level2 element without issues.
But if I click on .level3 and hide .level4, and then click .level2 to hide .level3, I can see .level4 item under .level2.
I don't know how to fix that
Please check demo:
$('.level2').click(function(e) {
if ($(this).next('li').hasClass('level3')) {
$(this).nextUntil('.level2').toggle();
e.preventDefault()
}
})
$('.level3').click(function(e) {
if ($(this).next('li').hasClass('level4')) {
$(this).nextUntil('.level3').toggle();
e.preventDefault()
}
})
$('.level4').click(function(e) {
if ($(this).next('li').hasClass('level5')) {
$(this).nextUntil('.level4').toggle();
e.preventDefault()
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="level1"><span>Level1</li>
<li class="level2"><span>Level2</li>
<li class="level2"><span>Level2</li>
<li class="level3"><span>Level3</li>
<li class="level3"><span>Level3</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level2"><span>Level2</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level4"><span>Level4</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level2"><span>Level2</li>
<li class="level3"><span>Level3</li>
<li class="level4"><span>Level4</li>
<li class="level4"><span>Level4</li>
<li class="level2"><span>Level3</li>
</ul>
Not sure what you are trying to achieve, Have a look on this, it might give you ideas of doing it cleaner and more efficient:
$('li a').click(function (e){
if($(this).parent().find('>ul').length>0){
$(this).parent().find('>ul').toggle();
}
e.preventDefault();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li><span>Level1
<ul>
<li><span>Level2
<ul>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
</ul>
</li>
<li><span>Level2</li>
<li><span>Level2</li>
<li><span>Level2
<ul>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
<li><span>Level3</li>
</ul>
</li>
</ul>
</li>
</ul>
You're probably going about this in the wrong way if you're looking to toggle a structured menu of nested lists. But assuming you DO want to have an arbitrary flat list, you need to check if the following item is visible and then explicitly call show() or hide(). For example:
$('.level2').click(function (e){
toggleUntil(this, 'level3', 'level2');
e.preventDefault();
})
$('.level3').click(function (e){
toggleUntil(this, 'level4', 'level3');
e.preventDefault();
});
$('.level4').click(function (e){
toggleUntil(this, 'level5', 'level4');
e.preventDefault();
})
function toggleUntil(x, start, last) {
if ($(x).next('li').hasClass(start)) {
if ($(x).next('li').is(':visible')) {
$(x).nextUntil('.' + last).hide();
} else {
$(x).nextUntil('.' + last).show();
}
}
}
I want to animate an element (.item-i) after I click on another element(.item-1) which is following below. Now I don't know, how to get to this element.
I want only the exact above element animated, not both above, only the first element above.
I made an easy show up in http://jsfiddle.net/Eef4v/1/. The YellowBG is the "animation".
Here is my JS code:
$('.item-1').click(function() {
$(this).closest('.item-i').css( "background", "yellow" );
});
And my HTML Markup:
<ul id="one" class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<ul id="Ul1" class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
Use:
$(this).closest('.item-ii').prev().css( "background", "yellow" );
Working Demo
For Toggling background color:
$(this).closest('.item-ii').prev().toggleClass("highlight");
CSS:
.highlight {background: yellow;}
Demo with ToggleClass
Two ways to get .item-i to highlight.
$(this).parents('.level-1').find('.item-i').css( "background", "yellow" );
but if you have multiple .item-i classes under your .level-1 then they would all turn yellow.
Working Demo
You could also write a find algorithm that goes through each parent of .item-1 and finds the closest item-i
$('.item-1').click(function () {
$(this).parents().each(function(index,elem){
var query = $(elem).find('.item-i');
if(query.length > 0)
{
query.first().css("background-color", "yellow");
return false;
}
});
});
Working Algorithm demo
I've a js code working with jquery 1.7.1 broken after migration to 1.9.1
You can see the problem on http://jsfiddle.net/QK5Ld/2/.
The code I'm using is this:
$("#navigation li ul").each(function(){
var that = this;
$(this).hide();
$(this).prev().toggle(function() {
$(that).show();
},
function() {
$(that).hide();
}
);
})
I read that toggle() is no more supported but I'm no js expert and I've lost many hours trying to complete update this js code.
Any idea?
Thank you in advance.
Nicola.
Note: The HTML used is like this:
<div id="navigation">
<ul>
<li id="category-2850">
ARCHIVIAZIONE
<ul>
<li id="category-3021">
ARCHIVIAZIONE MODULARE
<ul>
<li id="category-3326">SCATOLE ARCHIVIO CON MANIGLIE</li>
<li id="category-3022">SCATOLE ARCHIVIO IN CARTONE</li>
</ul>
</li>
<li id="category-2876">
BUSTE TRASPARENTI
<ul>
<li id="category-2917">BUSTE A PERFORAZIONE UNIVERSALE</li>
<li id="category-2916">BUSTE A U</li>
<li id="category-2877">BUSTE PER USI DIVERSI E DEDICATI</li>
</ul>
</li>
</ul>
</li>
<li id="category-3100">
ARREDAMENTO E COMPLEMENTI
<ul>
<li id="category-3101">
COMPLEMENTI D'ARREDO
<ul>
<li id="category-3102">ACCESSORI VARI</li>
<li id="category-3215">APPENDIABITI</li>
<li id="category-3307">CESTINI E POSACENERE</li>
<li id="category-3189">LAMPADE DA TAVOLO</li>
<li id="category-3214">LAMPADE DA TERRA</li>
<li id="category-3217">OROLOGI - BAROMETRI DA SCRIVANIA E DA PARETE</li>
<li id="category-3336">PIANTE SINTETICHE E VASI</li>
<li id="category-3216">PORTAOMBRELLI</li>
<li id="category-3173">TAPPETI E ZERBINI</li>
<li id="category-3328">TAVOLINI E SEDIE ZONA RISTORO</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Your code actually becomes cleaner in 1.9:
$("#navigation li ul").each(function(){
var that = this;
$(this).hide().prev().click(function(e) {
e.preventDefault();
$(that).toggle();
});
});
Though this would have worked just as well in previous versions too.
Update: here's an even better way:
$("#navigation li ul").hide().prev().click(function(e){
e.preventDefault();
$(this).next().toggle();
});
jsfiddle