Jquery show or hide children link if it is available - javascript

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/

Related

Finding Child of Parent Jquery

I am have a link in a li and when you click on it, it should open a ul, also contained in the li. I can't seem to get it to select the right element though. Code below
HTML
<ul>
<li>
hi
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
CSS
.hidden{display:none;}
Js
$( "a" ).click(function() {
$(this).parent("li").children("ul").css("display","block");
});
Since the ul is the next sibling to the a, you'd use next to access it. Then you can look at the ul's children (children) or descendants (find) for the .hidden one and remove the class (removeClass):
$(this).next().children(".hidden").removeClass("hidden");
Live Example:
$("a").on("click", function() {
$(this).next().children(".hidden").removeClass("hidden");
return false;
});
.hidden {
display: none;
}
<ul>
<li>
one
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
two
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
<li>
three
<ul>
<li class="hidden">more stuff</li>
</ul>
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
In your code you are trying to make ul displayed although it is visible and it does not effect the li under it so you need to access that li like this. Removing the hidden class of the element to make it displayed is a better approach than assigning inline style as the commentators said
$(this).parent("li").children("ul").children("li").removeClass("hidden");
check here fiddler link...
hope it will help you....
$( "a" ).click(function() {
$(this).next().children(".hidden").removeClass("hidden");
});

Jquery to create hierarchy with unordered list

I have an unordered list that when clicked shows their children. I am trying to add the feature where when there are children shown from a parent and a sibling of that parent is clicked, the other children close while the new ones open. Here is what I have so far:
<ul class="list">
<li> <a>Categories</a>
<ul>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
<li> <a>Parent</a>
<ul>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
<li><a>Child</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
This is my jquery:
$(document).ready(function(){
$('.list > li a').click(function(){
$(this).parent().children('ul').toggle();
});
Here is a jfiddle: https://jsfiddle.net/hmsvox5a/
Now if you click parent, the children show up. If you click another parent, its children appear as well. This leaves two sets of children open. I am trying to get the first set of children to close when I open the second. When I try to hide the siblings children, It messes up the whole jquery. Any ideas?
I'm not going to lie and tell you that this will scale or that it isn't awful, but this was the first thing I thought of off the top of my head. There are many ways to solve this.
$(document).ready(function(){
$('.list > li a').click(function(){
$('.open').parent().children('ul').toggle();
$('.open').removeClass('open');
$(this).addClass('open').parent().children('ul').toggle();
});
});
I believe what you want is this perhaps?
$(document).ready(function(){
$('.list > li a').click(function(){
$(this).parent('li').siblings('li').children('ul').hide();
$(this).siblings('ul').toggle().children().show();
});
});
test it out here: http://jsfiddle.net/vgwrqr6c/
I prefer to use CSS on the children to show items when its parent is shown. Then this efficient script works.
It keeps a reference to the last selected parent so it doesn't have to search the whole dom.
$(document).ready(function(){
var $selected;
$('.list > li a').click(function(){
if($selected){
$selected.remove class("open");
}
$selected = $(this).parent();
$selected.add class("open");
});
});
CSS would be something like this.
li ul{ display:none;}
li.open ul{ display: block}

how to hide ul li with specific class on page load by default before toggle click function apply

I have toggle tree which responds on click i.e. show or hide UL>li. I want to hide all the UL --> li who has parent ul-li. To make it more obvious I have apply css background-color to red which I want to be hidden by when page loads but show when it click back.
https://jsfiddle.net/toxic_kz/vr84pd6u/
<div>
<ul class="treeview">
<li><a>System Administration</a></li>
<li>
<a>System Core</a>
<ul>
<li><a>f2</a></li>
<li>
<a>f3</a>
<ul>
<li><a>f4</a></li>
<li><a>f5</a></li>
<li><a>f6</a></li>
</ul>
</li>
<li>
<a>f7</a>
<ul>
<li>
<a>f8</a>
<ul>
<li>
<a>f10</a>
<ul>
<li><a>f11</a></li>
</ul>
</li>
</ul>
</li>
<li><a>f9</a></li>
</ul>
</li>
</ul>
</li>
<li>
<a>MyFunctionA</a>
<ul>
<li>
<a>f12</a>
<ul>
<li><a>f13</a></li>
<li><a>f14</a></li>
</ul>
</li>
<li><a>f16</a></li>
</ul>
</li>
<li><a>Course Management</a></li>
</ul>
</div>
jQuery
<script type="text/javascript">
$(document).ready(function () {
$('.treeview li').each(function () {
if ($(this).children('ul').length > 0) {
$(this).addClass('parent');
}
});
// $('.treeview li.parent>ul li').css('display', 'none');
$('.treeview li.parent>ul li').css('background-color', 'red');
$('.treeview li.parent > a').click(function () {
$(this).parent().toggleClass('active');
$(this).parent().children('ul').slideToggle('fast');
});
});
</script>
If I understood your question correctly, this is what you want:
$(".treeview").find('ul').hide()
Place this in your $(document).ready function and it'll hide the underlying unordered list upon page load.

click on li if no leaf node its append in another div

I have one Activity xml file and I am try to get from activity when click on activity there child display. Its look like end of the all click.
<ul id="firstLevelChild">
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ul>
Now I want that if li have no leaf node then its display in other another div. Something like:
Click on Acitivities there have child node Physical1 and there also child Cricket and there chil One Day now one day have no child when click on one day its display in my <div id="result"></div>
I would add this as a comment, but I don't have enough rep. ChildNodes() isn't a function - since it looks like you're using jQuery, try children() instead.
I think javascript could helpr you there. A part from the fact that you first build your DOM correct ;)
The hasChildNodes() method returns TRUE if the current element node has child nodes, and FALSE otherwise.
http://www.w3schools.com/dom/met_element_haschildnodes.asp
Assuming the markup you provided is how it's going to be always i.e. ul as child for all li. You just check if ul exists inside the current li. See fiddle
HTML
<div id="content">
<ul id="firstLevelChild">
<li>
<ul id="ul">
<li id="4">Activities
<ul class="ul">
<li id="10066">Physical1
<ul class="ul">
<li id="10067">Cricket
<ul class="ul">
<li id="10068">One Day</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<h2>Result</h2>
<ul id="result"></ul>
JS
$('#content li').each(function (i) {
//for display purpose only
$('#content').append('<span class="list">li(' + i + '):' + $('ul', $(this)).length + '</span>');
//the code you needed
if ($('ul', $(this)).length < 1) {
$(this).on('click', function () {
$('#result').append($(this).parent().html());
});
}
});

Strange issues with expanding and collapsing list elements in a Wordpress generated form

I'm hoping someone might be able to show me
a) what is causing the current issues
b) an altogether more elegant solution
for the following problem:
I am extracting all the pages out of a Wordpress blog and the idea is to create a menu where sub navigation expands and contracts as the user interacts.
The nested menu markup is essentially as follows:
<nav id="projects">
<ul class="menu">
<li class="page_item page-item-249">
Selected projects
<ul class="children">
<li class="page_item page-item-298"><a href="..." >Level 2</a></li>
<li class="page_item page-item-263"><a href="..." >Level 2</a></li>
<li class="page_item page-item-212"><a href="..." >Level 2</a></li>
</ul>
</li>
<li class="page_item page-item-238">
Archive
<ul class="children">
<li class="page_item page-item-33">
Level 2
<ul class="children">
<li class="page_item page-item-46">Level 3</li>
<li class="page_item page-item-48">Level 3</li>
</ul>
</li>
<li class="page_item page-item-35">
Level 2
<ul class="children">
<li class="page_item page-item-52">Level 3</li>
<li class="page_item page-item-57">Level 3</li>
<li class="page_item page-item-59">Level 3</li>
<li class="page_item page-item-61">Level 3</li>
</ul>
</li>
</ul>
</li>
</ul>
The jQuery is as follows :
$(".page_item a").click( function(){
/* Set vars */
var $this = $(this);
var isActive = false;
var hasSublinks = false;
var nextLevel = $(this).next("ul");
if ( $this.next().html() !== null ) {hasSublinks = true;}
if ( $this.hasClass('active') ) {isActive = true;}
if ( !hasSublinks ) {
return true;
} else {
/* I have sub links... */
if (!isActive) {
/* I am not active */
$(".active").removeClass("active");
$(".children").slideUp();
$(this).next("ul").slideDown();
$(this).addClass('active');
} else {
$(nextLevel).slideUp();
$(this).removeClass('active');
}
return false;
}
});
When I click on 'Archive', it expands its child list as expected. However, when I click on a link here, I expect it to slide down and reveal the next level (Level 3) but it has the opposite effect of sliding up to go back to where I started from.
I've spent a lot of time in the console, on Wordpress Codex trying to see what might be the issue, particularly challenging for me is that this code was working before (or seemed to). I'm aware that the code isn't the cleanest so I'm really hoping can show me where I'm going wrong!
Thanks
You don't seem to have the class active anywhere, so when you are doing this :
if ( $this.hasClass('active') ) {isActive = true;}
It set is Active to false
So you go in this part of code :
if (!isActive) {
/* I am not active */
$(".active").removeClass("active");
$(".children").slideUp();
There is clearly a problem with your logic, try fixing it, i'll give you a hint if you find nothing

Categories

Resources