We Keep Coding

How can I select all the li child of an element in js

How can I select all the li child of an element in js
I want to select all the li elements of this item (direct child, grand child all)
document.querySelectorAll(".stellarnav li.has-sub").forEach(item =>{
item.addEventListener("click", function(){
console.log(item)
// to make you understand I described it below in css language
// in CSS language it is like this: item li
// then I want to removeAttribute from the all the child
// like this
document.querySelectorAll(`${item} li`).forEach(childItem =>{
childItem.removeAttribute("open");
})
// how can I achive this thing to select all the li childs
// here I tried it but this is not valid
})
});```

Just run this.querySelectorAll('li').forEach(li=>li.removeAttribute("open"));
This is a document querySelectorAll document
Tested code:
document.querySelectorAll(".nav li.has-sub").forEach(item =>{
item.addEventListener("click", function(){
this.querySelectorAll('li').forEach(li=>li.removeAttribute("open"));
})
})
li[open]{
color: red;
}
.nav >li{
margin: 10px
}
<ul class='nav'>
<li class='has-sub'>
this is has-sub li 1
<ul>
<li open>
this is open
</li>
<li open>
this is open
</li>
<li> this is another li
</li>
</ul>
</li>
<li class='has-sub'>
this is has-sub li 2
<ul>
<li open>
this is open
</li>
<li open>
this is open
</li>
<li> this is another li
</li>
</ul>
</li>
<li>
this is li 3
<ul>
<li open>
this is not has-sub open
</li>
<li open>
this is not has-sub open
</li>
<li> this is another li
</li>
</ul>
</li>
</ul>

jquery slideToggle() not working with toggleClass

I wanted to slideToggle menu items with toggleclass, .opened class should be added and removed for menu items. This is working for me when I toggle different menu item but for same menu item when I click this, .opened class won't get removed here is my code
Html menu tag
<ul id="menu-main-menu">
<li class="menu-item"><a href="link_url">text<a>
<ul class="sub-menu">
<li class="menu-item">
<ul class="sub-menu">
<li class="menu-item"><a href="link_url">second sub item<a></li>
</ul>
</li>
<li class="menu-item"><a href="link_url">first sub item<a></li>
<li class="menu-item"><a href="link_url">first sub item<a></li>
</ul>
</li>
<li class="menu-item"><a href="link_url">text<a></li>
</ul>
jquery code
$('.menu-item').on('click', function(e) {
$('.menu-item').removeClass('opened')
$(this).toggleClass('opened');
if ($('.sub-menu', this).length >=1) {
e.preventDefault();
}
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').hide('slow')
e.stopPropagation();
});
I am not sure what I am doing wrong. Can you please help me for this?
Thanks

There is a basic mistake in your code.
Close Anchor tags, you have an opening anchor tag on both the ends.
then use the logic to get your result, see the example, If need anything else, please let me know
Add sub items Achor or li text, that depends on your requirement, but for UX you should add some text so users can get that there is still some more content to see.
$('.menu-item').click(function(e){
$(this).siblings().find('> .sub-menu').slideUp();
$(this).find('> .sub-menu').slideToggle();
$(this).siblings().removeClass('opened');
$(this).toggleClass('opened');
e.stopPropagation();
});
.sub-menu {
display: none;
}
.menu-item a{
display: inline-block;
margin-bottom: 10px;
}
.menu-item {
margin-bottom: 10px;
}
.menu-item.hasSubmenu {
border-bottom: 1px solid;
}
.menu-item a {
background-color: red;
color: white;
}
.hasSubmenu {
position: relative;
}
.hasSubmenu:after {
position: absolute;
right: 10px;
top: 0px;
content: "+";
display: block;
font-size: 20px;
font-weight: bold;
}
.hasSubmenu.opened:after {
content: "-";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-main-menu">
<li class="menu-item hasSubmenu">
text
<ul class="sub-menu">
<li class="menu-item hasSubmenu">
First level
<ul class="sub-menu">
<li class="menu-item">second sub item</li>
<li class="menu-item">second sub item</li>
</ul>
</li>
<li class="menu-item">first sub item</li>
<li class="menu-item">first sub item</li>
</ul>
</li>
<li class="menu-item hasSubmenu">
text
<ul class="sub-menu">
<li class="menu-item hasSubmenu">
First level
<ul class="sub-menu">
<li class="menu-item">second sub item</li>
</ul>
</li>
<li class="menu-item">first sub item</li>
<li class="menu-item">first sub item</li>
</ul>
</li>
</ul>

$('.menu-item').on('click', function(e) {
$(this).toggleClass('opened');
$('.menu-item').not($(this)).removeClass('opened');
if ($('.sub-menu', this).length >= 1) {
e.preventDefault();
}
$(this).children('ul').slideToggle('fast');
$(this).siblings('li').find('ul').hide('slow')
e.stopPropagation();
});
Change the order of removing classes, then skip the current element.

sliding sub menu like uber

I am creating a menu like in uber help page here . How can i achieve the same menu type that is on click of the menu item the sub menu appears sliding and the other menu items disperses. how can i achieve this
<div class="side-memu">
<div class="wrap">
<ul>
<li>Lorem
<ul>
<li><p>dddd</p></li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</div>
.side-memu { width:300px; background:#dfdfdf; height:200px;}

Why don't you try some responsive navigation plugins?
There are few navigation menu plugins available for your requirement which are,
1. slinky Navigation Menu
2. Jquery mmenu
3. Multi Level push menu

Try this:
.side-memu { width:300px; background:#dfdfdf; height:200px;}
.side-memu ul ul{display:none}
HTML:
<div class="side-memu">
<div class="wrap">
<ul>
<li>Lorem
<ul>
<li><p>dddd</p></li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</li>
<li>Lorem
<ul>
<li><p>CCCC</p></li>
<li>222</li>
<li>222</li>
<li>222</li>
</ul>
</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</div>
</div>
Jquery:
$('.side-memu .wrap > ul > li ').click(function(){
$(this).children('ul').slideToggle();
});
$(document).mouseup(function (e)
{
var menu = $(".wrap > ul > li > ul");
if (!menu.is(e.target) // if the target of the click isn't the container...
&& menu.has(e.target).length === 0) // ... nor a descendant of the container
{
menu.slideUp();
}
});
Here is working example: https://jsfiddle.net/npLhmhe7/

jQuery sliding menu function

hi i have a unordered list menu, trying to make the sub-items slide down and up on clicking at the main items, i wrote a jQuery code that works but when click at open menu it close it and open again, but i was hoping it will just close it.
html
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.menuNav ul li').click(function(){
$(this).parent().find('ul').slideUp("fast");
$(this).parent().find("li").removeClass('menuactive');
$(this).find('ul').slideDown("slow");
$(this).addClass('menuactive');
});
$('.menuNav ul .menuactive').click(function(){
$(this).parent().find('ul').slideUp("fast");
});
});

If the li has a class menuactive, call the slideUp() function and remove the class menuactive else call the slideUp() function on all uls, remove the class menuactive from all lis, call slideDown() on the one that was clicked and add the class menuactive to the one that was clicked.
$(document).ready(function() {
$('ul > li > ul').hide();
$('.menuNav > ul > li').click(function() {
if ($(this).hasClass('menuactive')) {
$(this).find('ul').slideUp('fast');
$(this).removeClass('menuactive');
} else {
$(this).siblings().find('ul').slideUp('fast');
$(this).siblings().removeClass('menuactive');
$(this).find('ul').slideDown('fast');
$(this).addClass('menuactive');
}
});
});
.menuactive {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>

Nested Menus Using Jquery and CSS

I am trying to create a nested navigation menu using jquery and css.
Currently my nav is hosted on xetecx.comxa.com. The problem is that the nested submenus don't shift towards the right on the main menu like a proper nested menu as shown in this video.
https://drive.google.com/file/d/0B0sCu8aj8zu2UzBxQnVlQWdzcUU/edit?usp=sharing
If you click on menu on xetecx.comxa.com
Here is my html
<ul>
<li>
<img src="img/main.png" />
<ul>
<li>
Retails
<ul>
<li>
R
</li>
<li>
S
</li>
<li>
A
</li>
<li>
C
</li>
</ul>
</li>
<li>
Services
</li>
<li>
About Us
</li>
<li>
Contact Us
<ul>
<li>
R
</li>
<li>
S
</li>
<li>
A
</li>
<li>
C
</li>
</ul>
</li>
</ul>
</li>
<li>
<img src="img/social.png" />
<ul class="social">
<li>
<img src="img/facebook.png" />
</li>
<li>
<img src="img/twitter.png" />
</li>
<li>
<img src="img/linked.png" />
</li>
</ul>
</li>
</ul>
And My Jquery
(function($) {
//cache nav
var nav = $("#topNav");
//add indicators and hovers to submenu parents
nav.find("li").each(function() {
if ($(this).find("ul").length > 0) {
$("<span>").appendTo($(this).children(":first"));
//show subnav on hover
$(this).mouseenter(function() {
var ullist = $(this).find("ul");
ullist.stop(true, true).slideDown();
ullist.addClass("ullist");
});
//hide submenus on exit
$(this).mouseleave(function() {
var ullist = $(this).find("ul");
ullist.stop(true, true).slideUp();
ullist.removeClass("ullist");
});
}
});
})(jQuery);
And the CSS I tried to use to solve the problem
nav > ul > li > a > img {
width:60px;
height:60px;
}
.social li > a > img{
width:40px;
height:40px;
}
But it is not working out for me.

Have you tried changing the css for
nav ul ul ul
which should have left as some 100px;
so
.nav ul ul ul
{
left:100px;
}