$('li').on('click', function(){
$('li').not(this).each(function(){
$(this).children('ul').addClass('hide');
});
$(this).children('ul').removeClass('hide');
});
Help me, please! I got several hours on this and I can't figure how to solve it. The code above it's for a horizontal multi-level menu. On click shows a sub-menu and hide all the other sub-menus, everything works fine until this point.
The problem comes when I need to open a sub-menu nested to a sub-menu. The code hide all the elements and show only de clicked sub-menu; hide all the elements including the parent of the sub-menu so the clicked sub-menu is not showed.
How to show and hide the nested sub-menu??? I hope somebody can help me and thanks a lot in advance. Here is the simplify menu HTML code, the classic nested unordered lists.
Problem example: JSFiddle
<ul class="menu">
<li>Item
<ul class="sub-menu"><!--This works fine-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Item
<ul class="sub-menu"><!--This works fine-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem-->
<li>Item
<ul class="nested sub-menu"><!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
You need to stop propagation. Without that all parents will fire the click event.
$('li').on('click', function(e) {
$(this).children('ul').toggle();
$(this).siblings('li').find('ul').hide();
e.stopPropagation();
});
.sub-menu {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li>Item
<ul class="sub-menu">
<!--This works fine-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li>Item
<ul class="sub-menu">
<!--This works fine-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem-->
<li>Item
<ul class="nested sub-menu">
<!--Here is the problem too-->
<li>Item</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I can read your html structure but i don't see how your css is, otherwise here is the sample i made for you i'm using BEM methodology .
Code: example
idea is simple add display: none; on nested item , on click item add class for example active and show nested item display: block;
on this example if you need more nested item simple add ul with class primary-nav__subnav inside ~__subnav
<ul class="primary-nav__subnav">
Nested 1
<ul class="primary-nav__subnav">
Nested 2
</ul>
</ul>
Related
Usually, by default, I always saw that on mobile device clicking on the parent menu reveals submenu only and then if you click it again it opens the URL. But not on this site I'm working on, any ideas why it might override the default browser function and opens directly the parent link after the first click?
<nav id="nav">
<ul id="menu-primary-navigation" class="menu">
<li id="menu-item-30">Services
<ul class="sub-menu">
<li id="menu-item-4216" class="">Service 1</li>
<li id="menu-item-4215" class="">Service 2</li>
<li id="menu-item-4217" class="">Service 3</li>
</ul>
</li>
<li id="menu-item-1125" class="">About</li>
<li id="menu-item-1139" class="">Events</li>
</ul></nav>
It is hard to say whitout more information, but it will try next changes:
<nav id="nav">
<ul id="menu-primary-navigation" class="menu">
<li id="menu-item-30"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-4216" class="">Service 1</li>
<li id="menu-item-4215" class="">Service 2</li>
<li id="menu-item-4217" class="">Service 3</li>
</ul>
</li>
<li id="menu-item-1125" class="">About</li>
<li id="menu-item-1139" class="">Events</li>
</ul></nav>
So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
sub links in the structure ul and li elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.
Children elements covering parent element
If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.
Thanks a bunch guys!
It should work:
function main() {
$('.sub-elements').hide();
$('.main-elements').on('click', function () {
$(this).find('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
Maybe you forget to add the children class in jQuery
function main(){
$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children('.sub-elements').slideToggle(300);
});
}
$(document).ready(main);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements">Link 1
<ul class = "sub-elements">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
<li class = "main-elements">Link 2
<ul class = "sub-elements">
<li>Sub Link 3</li>
<li>Sub Link 4</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
First of all, i know that there are tons of tutorials out there to show how to make a dropdown list, but i wanted to try myself with my limited knowledge to make a very simple one, and i am aware that i am probably doing it wrong, but still i wanna try it.
So this is my problem now, i have set up ul and li in html and i have setup a simple jquery code that it will slideDown the submenu when mouse enters and slideUp the submenu when mouse leaves, but it doesn't work correctly at all.
Code:
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="ull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
});
</script>
All this, is inside one html, i am not using anything else, expet a CSS where the class "menu" is just this display:inline-block;
The problem is that dropdown menu doesn't work as it should. When i move my mouse over the Test the sub-menu appears, but this doesn't happen at Test 2A, plus when the dropdown list "drops", Test 2A follows below it aswell.
I can't explain the problem easily so i setup a jsfiddle which will help you understand.
Once again, i know that this is not right and i should have done it by using some other way, but i wanted to try using the few things i've learned so far to make a simple dropdown list.
Thanks in advance.
Id must be unique.
<li id="li">Test
<li id="li">Test 2A
Change to different id's or use a class
Corrected Fiddle
And do not take li and ul as Id's or classes.Those are reserved key words.Creates mess.
In my opinion, the best solution is to change id at one of the two minor ul and add a row in your function that call it.
<div style="width:200px; height:400px;">
<ul id="ul" class="menu" style="border:thin solid #090;">
<li id="li">Test
<ul id="ull">
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>
</li>
<li id="li">Test 2A
<ul id="lull">
<li>Test 3A</li>
<li>Test 4A</li>
</ul>
</li>
</ul>
</div>
<script>
$(document).ready(function(){
$("#ul ul").css({"color":"red","font-size":"30px"}).hide();
});
$("#li").mouseenter(function(){
$("#ull").slideDown(400).show();
$("#lull").slideDown(400).show();
});
$("#li").mouseleave(function(){
$("#ull").slideUp(400).hide(100);
$("#lull").slideUp(400).hide(100);
});
</script>
Could anyone please let me know what i'm doing wrong.
I have:
//My HTML
<div>
<ul>
<li id="test">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
//My CSS
.list-in-list {
display:none;
}
//My jQuery
$(document).ready(function() {
$('#test').click(function() {
alert("hello");
});
});
My final goal is to show that none displayed content if you press a list item, so that it expands neatly. However, i can't seem to get that alert() appearing in any way. Should i use an id for all list items in the main list, or is it enough with a class?
/W
you can add .next function to show next ul for any li curreny click by user. you have to change id test to one class name to make effect in all click of main li
HTML would be like
<div>
<ul>
<li class="main">Main Item 1</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main" >Main Item 2</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<li class="main">Main Item 3</li>
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</ul>
</div>
and JQuery function is below
$(document).ready(function() {
$('.main').click(function() {
$(this).next(".list-in-list").slideToggle();
});
});
for detail you can check link
Should i use an id for all list items in the main list, or is it enough with a class?
IDs are unique. Your JavaScript code will not work properly if you have multiple identical IDs. If you're planning on adding a similar attribute to all of your list items you'd use a class in this case (and reference it with . instead of #). In this case you'd call the click function using:
$('li.myClass').click(...);
If you only have one list, however, you can simply add the ID to the ul and use the click function as:
$('ul#myId > li').click(...);
Note that it would be marginally quicker with the classes in this case.
You'd then reference your inner ul using:
$('li.myClass > ul.list-in-list');
Or, depending on which of the above you went with:
$('ul#myId > li > ul.list-in-list');
(You'd use > here to select only the direct child. If you used ul#myId li you'd also be selecting the li elements which belong to any inner ul)
Your code works fine I do believe you have not included Jquery on your page - or maybe the path to it is not valid. Check your network tab to see if you get an http error retrieving jquery.
You can show the hidden li by doing the following:
$(document).ready(function() {
$('#test').click(function(e) {
$(this).find('.list-in-list').show();
});
});
Your code works fine:
Demo
In this case classes would be better than ids because Id's have to be unique on your page. You can use classes like in the demo below by adding a class to your outer li elements. Just change the binding from #test to whatever class you give your li elements.
$('.clickAbleLi').click(function(e) {
$(this).find('.list-in-list').show();
});
Demo
You close your </li> tag before your "list-in-list". You should close your </li> tag after your inside list ;) Like this :
<div>
<ul>
<li id="test">Main Item 1
<ul class="list-in-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li>Main Item 2</li>
<li>Main Item 3</li>
</ul>
</div>
It sholud work but Try moving the ID attribute to the A instead of LI if you experience problems
Specifically, I am trying to use the Tree functionality, as can be seen here:
http://cpojer.net/MooTools/tree/Demos/# The source can be seen here:
https://github.com/cpojer/mootools-tree/blob/master/README.md
This is my HTML:
<ul class="tree" id="tree">
<div id="admin">Admin Controls</div>
<li class="selected">Test
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Test 2
<ul>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Top Links
<ul>
<li id="article">Link 1</li>
<li id="article">Link 2</li>
<li id="article">Link 3</li>
<li id="article">Link 4</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Lame Links
<ul>
<li id="article">Link 9</li>
<li id="article">Link 10</li>
</ul>
</li>
<div id="admin">Admin Controls</div>
<li>Awesome Links
<ul>
<li id="article">Link 11</li>
<li id="article">Link 12</li>
</ul>
</li>
</ul>
I have added the Tree.js to my mootools.js core file.
This is my JS call:
window.addEvent('domready', function(){
var tree = new Tree('#tree');
tree.serialize();
});
As is, the sorting of the tree doesn't work.
Thoughts?
In the instantiation, you are passing a selector "#tree. If the tree class expects an ID, you don't use a pound sign, just "tree". In MooTools, there is a $ fn for ID lookups and a $$ fn for full selector lookups, there are various reasons they chose to separate the two.
Found this question and thought about answering.
A bit late though, but I was not member on SO when you asked this question :)
What I changed to put this working:
You need to pass just tree, the ID without the #.
Your tree has to have only <ul> and <li> elements, otherwise tree.js will not be able to drag them over normal divs.
You need unique ID's, I renamed all you id="admin" to class="admin" instead.
So you can use the javascript/mootools like:
window.addEvent('domready', function(){
var tree = new Tree('tree');
tree.serialize();
});
Demo here