Menu
Community /Pin to ProfileBookmark
@daveyerwinJun 14.2019 — #<ul>
<li class="cats" onclick = "Display()" >Car
<ul class="subs">
<li>New car</li>
<li>Rent car</li>
<li>Car parts</li>
</ul>
</li>
<li class="cats" onclick = "Display()" >Digital
<ul class="subs">
<li>Notebooks</li>
<li>Tablets</li>
<li>Phones</li>
</ul>
</li>
</ul>
<script>
function Display(){
var catitems = document.getElementsByClassName('cats');
var i;
var collection1=catitems[0].children[0].children;
var collection2=catitems[1].children[0].children;
}
</script>@daveyerwinJun 14.2019 — #using children collection is not a good answer
use getElementsByTagName instead @daveyerwinJun 14.2019 — #<style>
.subs{
display: none;
}
</style>
<ul>
<li class="cats">Car
<ul class="subs">
<li>New car</li>
<li>Rent car</li>
<li>Car parts</li>
</ul>
</li>
<li class="cats">Digital
<ul class="subs">
<li>Notebooks</li>
<li>Tablets</li>
<li>Phones</li>
</ul>
</li>
</ul>
<script>
(function(){
var active;
var catsCollection = document.querySelectorAll('.cats');
for(var i=0;i<catsCollection.length;i++){
catsCollection[i].onclick=function(){
if(typeof active != 'undefined') active.style.display = '';
active=this.getElementsByTagName('UL')[0];
active.style.display = 'block';
}
}
}())
</script>@daveyerwinJun 15.2019 — #this works as expected
sorry about the typo
may this will be more obvious
@daveyerwinJun 17.2019 — #more playing around with code ...
@daveyerwinJun 17.2019 — #the above closes the ul when it is clicked while open
I left off the closing </script>
sorry about that::
JS function to display child elments of the class onclick doesn’t work
__(Added `[code]…[/code]
I have mobile menu in which categories and subcategories are displayed one after another in the sequences. The categories are <li>s of one <ul>, and subcategories are <ul>s of each category <li>, and they have own <li>s of subcategory list like below:
Categories
[code]
<ul>
<li class=”cats” onclick = “Display()” >Car
<ul class=”subs”>
<li>New car<li>
<li>Rent car<li>
<li>Car parts<li>
</ul>
</li>
<li class=”cats” onclick = “Display()” >Digital
<ul class=”subs”>
<li>Notebooks<li>
<li>Tablets<li>
<li>Phones<li>
</ul>
</li>
</ul>
By default, I do not display subcategories in menu
[code]
.subs{
display: none;
}
And when clicking on any of the categories, that category’s subcategories must be seen.
I tired this function in JS which didn’t work.
[code]
function Display(){
var catitems = document.getElementsbyClassName(‘cats’);
var i;
for(i =0; i <catitems.length; i++){
catitems[i].children.style.display = “block”; (also tried this: catitems[i].firstChild.style.display = “block”;
}
}
Please, ignore letter and similar minor mistakes here as I hadn’t problem with them in Visual Studio.
Why doesn’t it work? What would be JS solution for this?
Sign in
to post a comment13 Comments(s) ↴
0
@daveyerwinJun 14.2019 — #<ul><li class="cats" onclick = "Display()" >Car
<ul class="subs">
<li>New car</li>
<li>Rent car</li>
<li>Car parts</li>
</ul>
</li>
<li class="cats" onclick = "Display()" >Digital
<ul class="subs">
<li>Notebooks</li>
<li>Tablets</li>
<li>Phones</li>
</ul>
</li>
</ul>
<script>
function Display(){
var catitems = document.getElementsByClassName('cats');
var i;
var collection1=catitems[0].children[0].children;
var collection2=catitems[1].children[0].children;
for(i =0; i <collection1.length; i++){
collection1[i].style.color = "red";
}
for(i =0; i <collection2.length; i++){
collection2[i].style.color = "green";
}}
</script>
0
@daveyerwinJun 14.2019 — #use getElementsByTagName instead
0
@daveyerwinJun 14.2019 — #<style>.subs{
display: none;
}
</style>
<ul>
<li class="cats">Car
<ul class="subs">
<li>New car</li>
<li>Rent car</li>
<li>Car parts</li>
</ul>
</li>
<li class="cats">Digital
<ul class="subs">
<li>Notebooks</li>
<li>Tablets</li>
<li>Phones</li>
</ul>
</li>
</ul>
<script>
(function(){
var active;
var catsCollection = document.querySelectorAll('.cats');
for(var i=0;i<catsCollection.length;i++){
catsCollection[i].onclick=function(){
if(typeof active != 'undefined') active.style.display = '';
active=this.getElementsByTagName('UL')[0];
active.style.display = 'block';
}
}
}())
</script>
0
@daveyerwinJun 15.2019 — #this works as expectedsorry about the typo
may this will be more obvious
``<i>
</i>
<style>
.subs{
display: none;
}
</style>
<ul>
<li class="cats">Car
<ul class="subs">
<li>New car</li>
<li>Rent car</li>
<li>Car parts</li>
</ul>
</li>
<li class="cats">Digital
<ul class="subs">
<li>Notebooks</li>
<li>Tablets</li>
<li>Phones</li>
</ul>
</li>
</ul>
<script>
(function(){
var active;
var catsCollection = document.querySelectorAll('.cats');
for(var i=0;i<catsCollection.length;i++){
catsCollection[i].onclick=function(){
if(typeof active != 'undefined') active.style.display = '';
active=this.getElementsByTagName('UL')[0];
active.style.display = 'block';
}
}
}())
</script><i>
</i>``0
@daveyerwinJun 17.2019 — #more playing around with code ...``<i>
</i><style>
.subs{
display: none;
}
</style>
<ul>
<li class="cats">Car
<ul class="subs">
<li>New car</li>
<li>Rent car</li>
<li>Car parts</li>
</ul>
</li>
<li class="cats">Digital
<ul class="subs">
<li>Notebooks</li>
<li>Tablets</li>
<li>Phones</li>
</ul>
</li>
</ul>
<script>
(function(){
var active;
var catsNodeList = document.querySelectorAll('.cats');
[].forEach.call(catsNodeList, function(item, index, array) {
item.onclick=function(){
if(typeof active != 'undefined') active.style.display = '';
if(this.getElementsByTagName('UL')[0] == active){
active.style.display = '';
active = undefined;
}else{
active=this.getElementsByTagName('UL')[0];
active.style.display = 'block';
}
}
})
}())<i>
</i>``0
@daveyerwinJun 17.2019 — #I left off the closing </script>
sorry about that::