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()
});
});
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'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'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");
I am using a WordPress plugin that dynamically creates the following list on the fly:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
I need to wrap specific lis in unique divs like this:
<ul>
<div id="main">
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</div>
<div id="carbs">
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</div>
<div id="spice">
<li class="spices"></li>
<li class="herbs"></li>
</div>
<div id="other">
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</div>
</ul>
I've read about using the wrapall() function but I can't find instructions on how to wrap a group of elements that do not have the same class.
Assuming that you take the time to define the relationship between the class-names and the eventual id under which they should appear, and that you use valid HTML, the following plain JavaScript works (albeit I think it could be refined):
var grouped = {
'main' : ['proteins','seafood','dairy','veggies','fruit'],
'carbs' : ['nuts-seeds','grains','pasta'],
'spice' : ['spices','herbs'],
'other' : ['technique','special','servings']
};
function groupBy(el, map) {
var els,
newList = document.createElement('ul'),
newListItem = document.createElement('li'),
tmpList, tmpLI;
for (var key in map) {
if (map.hasOwnProperty(key)){
els = el.querySelectorAll('.' + map[key].join(', .'));
tmpList = newList.cloneNode();
tmpLI = newListItem.cloneNode();
tmpLI.appendChild(tmpList);
tmpLI.id = key;
for (var i = 0, len = els.length; i < len; i++){
tmpList.appendChild(els[i]);
}
el.appendChild(tmpLI);
}
}
}
groupBy(document.querySelector('ul'),grouped);
JS Fiddle demo.
The above function converts:
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
<li class="spices"></li>
<li class="herbs"></li>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
Into:
<ul>
<li id="main">
<ul>
<li class="proteins"></li>
<li class="seafood"></li>
<li class="dairy"></li>
<li class="veggies"></li>
<li class="fruit"></li>
</ul>
</li>
<li id="carbs">
<ul>
<li class="nuts-seeds"></li>
<li class="grains"></li>
<li class="pasta"></li>
</ul>
</li>
<li id="spice">
<ul>
<li class="spices"></li>
<li class="herbs"></li>
</ul>
</li>
<li id="other">
<ul>
<li class="technique"></li>
<li class="special"></li>
<li class="servings"></li>
</ul>
</li>
</ul>