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";
}
Related
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>
I have a nested list with groups and subgroups, and links contained therein.
function filtersearch() {
var input, filter, ul, tr, search, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("list");
tr = ul.getElementsByTagName("li");
for (i = 0; i < tr.length; i++) {
search = tr[i].getElementsByTagName("a")[0];
txtValue = search.textContent || search.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
<input id="myInput" class="RxSearchbox" onkeyup="filtersearch()" placeholder="Filter" title="Filter list" type="text">
<div id="list">
<ul>
<li>
Group 1
<ul>
<li>
Subgroup1
<ul class="nav">
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
<li>
link4
</li>
<li>
link5
</li>
</ul>
</li>
<li>
Subgroup2
<ul class="nav">
<li>
link6
</li>
<li>
link7
</li>
<li>
link8
</li>
<li>
link9
</li>
<li>
link10
</li>
</ul>
</li>
<li>
Subgroup3
<ul class="nav">
<li>
link11
</li>
<li>
link12
</li>
<li>
link13
</li>
<li>
link14
</li>
<li>
link15
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I have an input box and am using Javascript to try to filter that list (e.g. if you type in "1", it would only show "1", "10", "11", "12", "13" etc., but it's only doing so on the parent element (i.e. will only show "Group 1") and not the children.
How can I get the script to filter all elements of li, parents and children, not just the parent?
Based on your HTML structure, the following JS code shall work fine.
P.S. Only unhide_parent() function was needed on top of your code.
function filtersearch() {
var input, filter, ul, tr, search, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("list");
tr = ul.getElementsByTagName("li");
for (i = 0; i < tr.length; i++) {
search = tr[i].getElementsByTagName("a")[0];
txtValue = search.textContent || search.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
unhide_parent(tr[i])
} else {
tr[i].style.display = "none";
}
}
}
unhide_parent = (ele) => {
if(ele.parentNode.parentNode.style.display=="none") {
ele.parentNode.parentNode.style.display='';
unhide_parent(ele.parentNode.parentNode)
}
};
<input id="myInput" class="RxSearchbox" onkeyup="filtersearch()" placeholder="Filter" title="Filter list" type="text">
<div id="list">
<ul>
<li>
Group 1
<ul>
<li>
Subgroup1
<ul class="nav">
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
<li>
link4
</li>
<li>
link5
</li>
</ul>
</li>
<li>
Subgroup2
<ul class="nav">
<li>
link6
</li>
<li>
link7
</li>
<li>
link8
</li>
<li>
link9
</li>
<li>
link10
</li>
</ul>
</li>
<li>
Subgroup3
<ul class="nav">
<li>
link11
</li>
<li>
link12
</li>
<li>
link13
</li>
<li>
link14
</li>
<li>
link15
</li>
</ul>
</li>
</ul>
</li>
<li>
Group 2
<ul>
<li>
Subgroup-dup-1
<ul class="nav">
<li>
link-dup-1
</li>
<li>
link-dup-2
</li>
<li>
link-dup-3
</li>
<li>
link-dup-4
</li>
<li>
link-dup-5
</li>
</ul>
</li>
<li>
Subgroup-dup-2
<ul class="nav">
<li>
link-dup-6
</li>
<li>
link-dup-7
</li>
<li>
link-dup-8
</li>
<li>
link-dup-9
</li>
<li>
link-dup-10
</li>
</ul>
</li>
<li>
Subgroup-dup-3
<ul class="nav">
<li>
link-dup-11
</li>
<li>
link-dup-12
</li>
<li>
link-dup-13
</li>
<li>
link-dup-14
</li>
<li>
link-dup-15
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I would start by placing a data attribute data-id within each li that corresponds with the link number. Then get all the .nav li elements using querySelectorAll('.nav li') this will return everyone of the list elements. Then you can iterate over these using a forEach loop checking the el.dataset.id to see if it includes the input.value, if it does we have a match.
You can then reference these however you wish, hidden elements you turn visible or highlighting the list-items a tag...
function filtersearch() {
const input = document.getElementById("myInput");
const lists = document.querySelectorAll('.nav li')
lists.forEach((list, i) => {
const dataId = list.dataset.id
dataId.includes(input.value) && input.value !== '' ?
list.children[0].classList.add('green') :
list.children[0].classList.remove('green')
})
}
.green {
background-color: lightgreen;
color: darkgreen;
}
<input id="myInput" class="RxSearchbox" onkeyup="filtersearch()" placeholder="Filter" title="Filter list" type="text">
<div id="list">
<ul>
<li>
Group 1
<ul>
<li>
Subgroup1
<ul class="nav">
<li data-id="1">
link1
</li>
<li data-id="2">
link2
</li>
<li data-id="3">
link3
</li>
<li data-id="4">
link4
</li>
<li data-id="5">
link5
</li>
</ul>
</li>
<li>
Subgroup2
<ul class="nav">
<li data-id="6">
link6
</li>
<li data-id="7">
link7
</li>
<li data-id="8">
link8
</li>
<li data-id="9">
link9
</li>
<li data-id="10">
link10
</li>
</ul>
</li>
<li>
Subgroup3
<ul class="nav">
<li data-id="11">
link11
</li>
<li data-id="12">
link12
</li>
<li data-id="13">
link13
</li>
<li data-id="14">
link14
</li>
<li data-id="15">
link15
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
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've this code
$('.item_has_children a').first().css("color","red");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="item_has_children">
Category 1
<ul class="submenu">
<li class="menu_item">
Hello
</li>
<li class="menu_item">
Hello
</li>
</ul>
</li>
<li class="item_has_children">
Category 2
<ul class="submenu">
<li class="menu_item">
Hello
</li>
<li class="menu_item">
Hello
</li>
</ul>
</li>
</ul>
I want to color the first links : "category 1" and "category 2".
I try but only the first link is coloring red.
Thanks for your help !
You can use immediate child selector > to target immediate anchor elements both using CSS and jquery.
Using CSS:
.item_has_children > a{color:red;}
Working Demo using CSS:
.item_has_children>a {
color: red
}
<ul>
<li class="item_has_children">
Category 1
<ul class="submenu">
<li class="menu_item">
Hello
</li>
<li class="menu_item">
Hello
</li>
</ul>
</li>
<li class="item_has_children">
Category 2
<ul class="submenu">
<li class="menu_item">
Hello
</li>
<li class="menu_item">
Hello
</li>
</ul>
</li>
</ul>
Using Jquery:
$('.item_has_children > a').css("color","red");
Working Demo using Jquery:
$('.item_has_children > a').css("color","red")
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="item_has_children">
Category 1
<ul class="submenu">
<li class="menu_item">
Hello
</li>
<li class="menu_item">
Hello
</li>
</ul>
</li>
<li class="item_has_children">
Category 2
<ul class="submenu">
<li class="menu_item">
Hello
</li>
<li class="menu_item">
Hello
</li>
</ul>
</li>
</ul>
No need to use javascript for this, you can use CSS.(Better Performance and User Experience)
.item_has_children > a {
color: red;
}
> here will select direct children of .item_has_children element.
Demo:
.item_has_children>a {
color: red;
}
<ul>
<li class="item_has_children"> Category 1
<ul class="submenu">
<li class="menu_item"> Hello
</li>
<li class="menu_item"> Hello
</li>
</ul>
</li>
<li class="item_has_children"> Category 2
<ul class="submenu">
<li class="menu_item"> Hello
</li>
<li class="menu_item"> Hello
</li>
</ul>
</li>
</ul>
operator > is used for select immediate started DOM element of selector.
$("li.item_has_children > a").css("color","red");