I have a simple question, I don't know much about JavaScript, how can I get the following documentation as I want
<ul id='mainul'>
<li data-uid='1'>1. item</li>
<li data-uid='2'>2. item
<ul>
<li data-uid="3">
3. item
<ul>
<li></li>
</ul>
</li>
</ul>
<ul>
<li data-uid="4">
4.item
<ul>
<li data-uid="5">5.item</li>
</ul>
</li>
</ul>
</li>
</ul>
I only need to get the 2 ul elements in the #mainul one.
You can use normal scss selecteors to get the node list of thte lis
const listItems = document.querySeectorAll('#mainul > li');
const listItems = document.querySelectorAll('#mainul > li');
console.log(listItems)
<ul id='mainul'>
<li data-uid='1'>1. item</li>
<li data-uid='2'>2. item
<ul>
<li data-uid="3">
3. item
<ul>
<li></li>
</ul>
</li>
</ul>
<ul>
<li data-uid="4">
4.item
<ul>
<li data-uid="5">5.item</li>
</ul>
</li>
</ul>
</li>
</ul>
Related
I'm creating a sub menu using jquery. I have made the code as below. But there is still something that is not working properly. What I want is, when the start, the menu is closed. Currently, all menus are open. How do I do it, can anyone help me?
$('.list-menu > li').click(function () {
var child = $(this).children('ul');
if(child.length===0){
$(this).children().addClass("active");
return;
}
$('.list-menu ul').not(child).slideUp('normal');
child.slideDown('normal');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
<a href="#">
Querying For More Information
</a>
</li>
</ul>
You can set the child ul elements to display: none on page load using CSS:
ul > li > ul { display: none; }
$('.list-menu > li').click(function() {
var child = $(this).children('ul');
$(this).children().addClass("active");
$('.list-menu ul').not(child).slideUp('normal');
child.slideToggle('normal');
});
ul > li > ul { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list-menu">
<li class="menu-1">
Getting Started
<ul class="submenu">
<li id="sub-1">Child 1
</li>
<li id="sub-2">Child 2
</li>
</ul>
</li>
<li class="menu-2">
Controlling How Data is Indexed
<ul class="submenu">
<li id="sub-3">Child 1
</li>
<li id="sub-4">Child 2
</li>
</ul>
</li>
<li class="menu-3">
Uploading and Indexing Data
<ul class="submenu">
<li id="sub-5">Child 1
</li>
<li id="sub-6">Child 2
</li>
</ul>
</li>
<li>
Querying For More Information
</li>
</ul>
I'm trying to collapse a nested menu with jQuery. I read this answer and, to me, it appears to be similar to my solution. The problem is that mine doesn't work.
What I think I'm saying with my JavaScript code is: "hey, when a user clicks on a li that is the parent of a ul.submenu, get its ul.submenu children and attach the slideToggle only to it". But, as you can see from the snippet, it closes also the parent ul.submenu and I can't understand why.
$(document).ready(function () {
$('.submenu').hide();
$('.submenu').parent('li').click(function () {
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
You want to stop the click event from bubbling up the DOM and triggering the click handler on the parent. Use .stopPropagation() for that:
$(document).ready(function() {
$('.submenu').hide();
$('.submenu').parent('li').click(function(e) {
e.stopPropagation()
$(this).children('ul.submenu').slideToggle("slow");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul class="menu">
<li>Home</li>
<li>Blog
<ul class="submenu">
<li>
Author
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Category</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Tag</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
<li>
<span>Post</span>
<ul class="submenu">
<li>New</li>
<li>Handle</li>
</ul>
</li>
</ul>
</li>
<li>Photo</li>
<li>Settings</li>
</ul>
</nav>
I have a menu populating from MySQL table and PHP up to some nested sub levels.
my menu like this:
A
B
C
If click on A first time it is showing all the child elements and again I click child elements of A it displaying child elements also fine.
But the problem is when I click on the B after open all the levels items of A it shows B sub elements fine. But again if I click A it showing all the elements except child child elements also.
I used jQuery for this.
So I want to bring back to the original state? ( only expand the top child elements, not the sub child elements ),
how to do that?
//this is my jquery code for elements clickable in menu.
$(document).ready(function() {
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").children('ul').hide();
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
});
<!-- This is the html I am generating using a PHP function -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="limain">A
<ul>
<li class="lichild">A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">a1
<ul>
<li class="lichild">aaaaaa</li>
<li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">A6
<ul>
<li class="lichild">A8
<ul>
<li class="lichild">A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>
Use find inside siblings and hide it.
$(".lichild").parent().hide();
$(".limain").click(function() {
$(this).children('ul').show();
$(this).siblings(".limain").find('ul').hide(); // Change in this line
});
$(".lichild").click(function() {
$(this).children('ul').show();
$(this).siblings().children('ul').hide()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li class="limain">
A
<ul>
<li class="lichild">
A1
<ul>
<li class="lichild">a2</li>
<li class="lichild">
a1
<ul>
<li class="lichild">aaaaaa</li <li class="lichild">abbbbbb</li>
</ul>
</li>
</ul>
</li>
<li class="lichild">A2</li>
<li class="lichild">A3</li>
<li class="lichild">A4</li>
<li class="lichild">A5</li>
</ul>
<li class="limain">
B
<ul>
<li class="lichild">B1</li>
<li class="lichild">B2</li>
</ul>
</li>
<li class="limain">
C
<ul>
<li class="lichild">C1</li>
<li class="lichild">C2</li>
<li class="lichild">C3</li>
<li class="lichild">
A6
<ul>
<li class="lichild">
A8
<ul>
<li class="lichild">
A10
<ul>
<li class="lichild">A13
</li>
<li class="lichild">A14
</li>
</ul>
</li>
<li class="lichild">A11
</li>
</ul>
</li>
<li class="lichild">A9
</li>
</ul>
</li>
<li class="lichild">A7
</li>
</ul>
</li>
<li class="limain">
D
<ul>
<li class="lichild">D1</li>
<li class="lichild">D2
</li>
</ul>
</li>
</ul>
$(document).ready(function () {
$(".lichild").parent().hide();
$(".limain").click(function () {
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
$(".lichild").click(function () {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide()
});
});
I'm working on a navigation with 3 levels and want use toggle to expand and close those levels. I got it to work with the second level but am struggling with the third level.
I want the third level(purpose1,purpose2) to open when the second level(Purpose) is clicked.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li>Purpose</li>
</ul>
<ul>
<li>purpose1</li>
<li>purpose2/li>
</ul>
</li>
</ul>
Javascript:
$('li.dropdown').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
$('ul.products').click(function() {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
});
I've created a fiddle to illustrate the issue. The actual navigation is much more complex but this should do the job. Any suggestiones are really appreciated!
Your html is wrong. If the third lvl is to be displayed by clicking "purpose" it shoudl look like this:
<li class="dropdown">Products
<ul class="products">
<li>Series</li>
<li >Purpose
<ul >
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
</ul>
</li>
Then just add a class to this thrid lvl list parent and add the jquery fucntion.
clicking in the product li is propagating up to the top level, which is causing the close.
$('ul.products').click(function(e) {
$('ul.products').not(this).find('ul').hide();
$(this).find('ul').toggle();
e.stopPropagation();
});
.
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose
<ul>
<li>purpose1</li>
<li>purpose2</li>
</ul>
</li>
</ul>
</li>
</ul>
here is the simplified working version, first move you 3rd level ul inside the li
<ul>
<li class="dropdown">About Us
<ul>
<li>Services</li>
<li>History</li>
</ul>
</li>
<li class="dropdown">Products
<ul class="products">
<li>Series
<ul>
<li>Series123</li>
<li>Series456</li>
</ul>
</li>
<li>Purpose</li>
</ul>
</li>
</ul>
and here goes the jQuery snippet -
$('li.dropdown a').click(function(){
$('li.dropdown').not(this).find('ul').hide();
$(this).parent('li').find('ul').toggle();
});
$('li.dropdown ul li').click(function() {
$(this).find('ul').toggle();
});
Check the working fiddle
Been using this javascript code to make my lists clickable to collapse but when I load the page with it attached it seems to expand the lists on loading. My question is with the javascript code is it possible to make it collapse apon page load so users have to click the text to expand it.
Heres the full code with the javascript
<UL id="example_tree">
<LI><span><strong>A</Strong></span>
<UL>
<LI><span><p>Aimees Travel</p></span></LI>
<LI><span><p>Airport Parking</p></span></LI>
<LI><span><p>Arriva Bolton</p></span></LI>
<LI><span><p>Arriva Winsford</p></span></LI>
<LI><span><p>Arriva Wythenshawe</p></span></LI>
</UL>
</LI>
<LI><span><strong>B</Strong></span>
<UL>
<LI><span><p>Bakers Coaches</p></span></LI>
<LI><span><p>Belle Vue</p></span></LI>
<LI><span><p>Bullocks Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>C</Strong></span>
<UL>
<LI><span><p>Cheshire Council</p></span></LI>
<LI><span><p>Chesters Executive Travel</p></span></LI>
<LI><span><p>Copelands</p></span></LI>
</UL>
</LI>
<LI><span><strong>D</Strong></span>
<UL>
<LI><span><p>D&G</p></span></LI>
</UL>
</LI>
<LI><span><strong>E</Strong></span>
<UL>
<LI><span><p>Eavesway</p></span></LI>
<LI><span><p>Edwards Coaches</p></span></LI>
<LI><span><p>Ellisons Travel</p</span></LI>
</UL>
</LI>
<LI><span><strong>F</Strong></span>
<UL>
<LI><span><p>First Potteries</p></span></LI>
<LI><span><p><p>Flight Shuttle Services</p></span></LI>
</UL>
</LI>
<LI><span><strong>G</Strong></span>
<UL>
<LI><span><p>GHA Group</p></span></LI>
<LI><span><<p>Go Goodwins</p></span></LI>
<LI><span><p>Golden Green Travel</p></span></LI>
<LI><span><p>Grayway</p></LI>
</UL>
</LI>
<LI><span><strong>H</Strong></span>
<UL>
<LI><span><p>Happy Days Coaches</p></span></LI>
<LI><span><p>High Peak</p></span></LI>
<LI><span><p>Hollinshead Coaches</p></span></LI>
<LI><span>Holmeswood Group</p></span></LI>
</UL>
</LI>
<LI><span><strong>I</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>J</Strong></span>
<UL>
<LI><span><p>Jones Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>K</Strong></span>
<UL>
<LI><span><p>Kt's Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>L</Strong></span>
<UL>
<LI><span><p>Lambs</p></span></LI>
<LI><span><p>Leons Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>M</Strong></span>
<UL>
<LI><span><p>Manchester Airport Group</p></span></LI>
<LI><span><p>Manchester Community Transport</p></span></LI>
<LI><span><p>Maynes Coaches</p></span></LI>
<LI><span><p>Megabus</p></span></LI>
</UL>
</LI>
<LI><span><strong>N</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>O</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>P</Strong></span>
<UL>
<LI><span><p>Parks of Hamilton</p></span></LI>
<LI><span><p>Pauls of Stoke</p></span></LI>
</UL>
</LI>
<LI><span><strong>Q</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>R</span>
<UL>
<LI><span><p>Robin Hood Travel</p></span></LI>
<LI><span><p>Roy McCarthy Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>S</Strong></span>
<UL>
<LI><span><p>Scraggs</p></span></LI>
<LI><span><p>Selwyns Travel</p></span></LI>
<LI><span> <p>Shearings</p></span></LI>
<LI><span><p>Smiths of Marple</p></LI>
<LI><span><p>South Lancs Travel</p></span></LI>
<LI><span><p>Stagecoach Manchester</p></span></LI>
<LI><span><p>Stanways Coaches</p></span></LI>
<LI><span><p><p>Stotts</p></p></span></LI>
<LI><span><p>Swans Travel</p></span></LI>
</UL>
</LI>
<LI><span><strong>T</Strong></span>
<UL>
<LI><span><p>Terravision</p></span></LI>
<LI><span><p>Transdev Burnley & Pendle</p></span></LI>
<LI><span><p>Transdev Lancashire United</p></span></LI>
<LI><span><p>Travellers Choice</p></span></LI>
</UL>
</LI>
<LI><span><strong>U</Strong></span>
<UL>
<LI><span><p>UK Coachways</p></p></span></LI>
</UL>
</LI>
<LI><span><strong>V</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>W</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>X</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>Y</Strong></span>
<UL>
<LI><span><p>Yelloway</p></span></LI>
</UL>
</LI>
<LI><span><strong>Z</Strong></span>
<UL>
</UL>
</LI>
</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++){
allSpan[i].onclick=function(){
if(this.parentNode){
var childList = this.parentNode.getElementsByTagName('UL');
for(var j = 0; j< childList.length;j++){
var currentState = childList[j].style.display;
if(currentState=="none"){
childList[j].style.display="block";
}else{
childList[j].style.display="none";
}
}
}
}
}
</script>
Basically as you can see with the Javascript running the page loads with the lists expanded but I want them closed apon loading if its possible so users click the letters to expand and see the lists under it. Some have suggested that I need CSS code also to go along wit it to fix my issue but I want to try it with the javascript code first before adding extra code in other places
You would rather hide list items with CSS by default. For this you would then need to use getComputedStyle since there is no style.display property set explicitly initially.
#example_tree > li > ul {
display: none;
}
<UL id="example_tree">
<LI><span><strong>A</Strong></span>
<UL>
<LI><span><p>Aimees Travel</p></span></LI>
<LI><span><p>Airport Parking</p></span></LI>
<LI><span><p>Arriva Bolton</p></span></LI>
<LI><span><p>Arriva Winsford</p></span></LI>
<LI><span><p>Arriva Wythenshawe</p></span></LI>
</UL>
</LI>
<LI><span><strong>B</Strong></span>
<UL>
<LI><span><p>Bakers Coaches</p></span></LI>
<LI><span><p>Belle Vue</p></span></LI>
<LI><span><p>Bullocks Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>C</Strong></span>
<UL>
<LI><span><p>Cheshire Council</p></span></LI>
<LI><span><p>Chesters Executive Travel</p></span></LI>
<LI><span><p>Copelands</p></span></LI>
</UL>
</LI>
<LI><span><strong>D</Strong></span>
<UL>
<LI><span><p>D&G</p></span></LI>
</UL>
</LI>
<LI><span><strong>E</Strong></span>
<UL>
<LI><span><p>Eavesway</p></span></LI>
<LI><span><p>Edwards Coaches</p></span></LI>
<LI><span><p>Ellisons Travel</p</span></LI>
</UL>
</LI>
<LI><span><strong>F</Strong></span>
<UL>
<LI><span><p>First Potteries</p></span></LI>
<LI><span><p><p>Flight Shuttle Services</p></span></LI>
</UL>
</LI>
<LI><span><strong>G</Strong></span>
<UL>
<LI><span><p>GHA Group</p></span></LI>
<LI><span><<p>Go Goodwins</p></span></LI>
<LI><span><p>Golden Green Travel</p></span></LI>
<LI><span><p>Grayway</p></LI>
</UL>
</LI>
<LI><span><strong>H</Strong></span>
<UL>
<LI><span><p>Happy Days Coaches</p></span></LI>
<LI><span><p>High Peak</p></span></LI>
<LI><span><p>Hollinshead Coaches</p></span></LI>
<LI><span>Holmeswood Group</p></span></LI>
</UL>
</LI>
<LI><span><strong>I</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>J</Strong></span>
<UL>
<LI><span><p>Jones Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>K</Strong></span>
<UL>
<LI><span><p>Kt's Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>L</Strong></span>
<UL>
<LI><span><p>Lambs</p></span></LI>
<LI><span><p>Leons Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>M</Strong></span>
<UL>
<LI><span><p>Manchester Airport Group</p></span></LI>
<LI><span><p>Manchester Community Transport</p></span></LI>
<LI><span><p>Maynes Coaches</p></span></LI>
<LI><span><p>Megabus</p></span></LI>
</UL>
</LI>
<LI><span><strong>N</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>O</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>P</Strong></span>
<UL>
<LI><span><p>Parks of Hamilton</p></span></LI>
<LI><span><p>Pauls of Stoke</p></span></LI>
</UL>
</LI>
<LI><span><strong>Q</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>R</span>
<UL>
<LI><span><p>Robin Hood Travel</p></span></LI>
<LI><span><p>Roy McCarthy Coaches</p></span></LI>
</UL>
</LI>
<LI><span><strong>S</Strong></span>
<UL>
<LI><span><p>Scraggs</p></span></LI>
<LI><span><p>Selwyns Travel</p></span></LI>
<LI><span> <p>Shearings</p></span></LI>
<LI><span><p>Smiths of Marple</p></LI>
<LI><span><p>South Lancs Travel</p></span></LI>
<LI><span><p>Stagecoach Manchester</p></span></LI>
<LI><span><p>Stanways Coaches</p></span></LI>
<LI><span><p><p>Stotts</p></p></span></LI>
<LI><span><p>Swans Travel</p></span></LI>
</UL>
</LI>
<LI><span><strong>T</Strong></span>
<UL>
<LI><span><p>Terravision</p></span></LI>
<LI><span><p>Transdev Burnley & Pendle</p></span></LI>
<LI><span><p>Transdev Lancashire United</p></span></LI>
<LI><span><p>Travellers Choice</p></span></LI>
</UL>
</LI>
<LI><span><strong>U</Strong></span>
<UL>
<LI><span><p>UK Coachways</p></p></span></LI>
</UL>
</LI>
<LI><span><strong>V</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>W</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>X</Strong></span>
<UL>
</UL>
</LI>
<LI><span><strong>Y</Strong></span>
<UL>
<LI><span><p>Yelloway</p></span></LI>
</UL>
</LI>
<LI><span><strong>Z</Strong></span>
<UL>
</UL>
</LI>
</LI>
</UL>
</LI>
</UL>
<script type="text/javascript">
var allSpan = document.getElementsByTagName('SPAN');
for(var i = 0; i < allSpan.length; i++){
allSpan[i].onclick=function(){
if(this.parentNode){
var childList = this.parentNode.getElementsByTagName('UL');
for(var j = 0; j< childList.length;j++){
var currentState = window.getComputedStyle(childList[j], null).display;
if (currentState == "none"){
childList[j].style.display = "block";
} else {
childList[j].style.display = "none";
}
}
}
}
}
</script>
You might wanna use jQuery's toogle() method. The toggle() method toggles between hide() and show() for the selected elements. Its usage can be found in w3schools as well.
Or you might use the jQuery Accordion to achieve your goal.Here are the links:
1.Accordion
2. If want to learn about accordion link
Try to add before the end of your script :
var allUL = document.getElementsByTagName('UL');
for(var i = 0; i < allUL.length; i++){
allUL[i].style.display="none";
}