I am really stuck here at the moment and just wanted to know if somebody could think of an easy solution to my problem. I have several nested <ul> items with a few <li> in each and
I want the following to happen:
Whenever I click on one <li> item and it contains another <ul> it should slide down and show me all the list items and at the same time close the other lists on the same "nesting level". I tried to realize this but I really don't want to write some code for every possible constellation and I think there is an easier way.
For better understanding: http://jsfiddle.net/7zTc2/1/
Somehow the example is not working, but if you copy the content into local files it works. I did the first three lists and I want it to work like this for all the "child"-lists as well. If somebody could help me I'd really appreciate that!
Good day! Based on what I understood from your problem, here's how I did it:
HTML Markup
<ul>
<li>
<span>value 1</span>
<ul>
<li>
<span>inner value 1</span>
<ul>
<li>inner inner value 1</li>
<li>inner inner value 2</li>
<li>inner inner value 3</li>
</ul>
</li>
<li>
<span>inner value 2</span>
<ul>
<li>inner inner value 1</li>
<li>inner inner value 2</li>
<li>inner inner value 3</li>
</ul>
</li>
<li>
<span>inner value 3</span>
<ul>
<li>inner inner value 1</li>
<li>inner inner value 2</li>
<li>inner inner value 3</li>
</ul>
</li>
</ul>
</li>
<li>
<span>value 2</span>
<ul>
<li>inner value 1</li>
<li>inner value 2</li>
<li>inner value 3</li>
</ul>
</li>
<li>
<span>value 3</span>
<ul>
<li>inner value 1</li>
<li>inner value 2</li>
<li>inner value 3</li>
</ul>
</li>
</ul>
CSS
li > ul {
display: none;
}
JQuery
$("ul > li").has("> ul").click(function(e) {
e.stopPropagation();
$(this).find("> ul").slideToggle();
$(this).siblings("li").find("> ul").slideUp();
});
$("ul > li").click(function(e) {
e.stopPropagation();
});
Related
I'm embarrased to ask, but I'm running into a very primitive problem.
I have a very simple menu consisting of the follwing
<div id="mySidenav">
<li>
<a></a>
<ul>
<li></li>
<li></li>
<li></li>
</uL>
</li>
<li><a></a>
<ul>
<li><a></a>
<ul>
<li></li>
<li></li>
</ul>
</li>
</ul>
</div>
now I have very simple jquery to hide all the inner UL's which is $("#mySidenav li > ul").hide();
To toggle the inner ul's I use
`$("#mySidenav li").click(function(){
$(this).children("ul").toggle();
})`
However, now I run into a problem. Whenever I click an inner-UL, the parent UL 'takes' the click and closes itself.
How do I fix this?
It's because the event bubbles up the DOM tree.
If list element A is contained within list element B, and
element A is clicked, the click event fires for element A and then it
will bubble up and fire for element B. This occurs because technically
you are clicking both elements.
To prevent this behaviour, stop the propagation by using event.stopPropagation
$("#mySidenav li").click(function(event){
$(this).children("ul").toggle();
event.stopPropagation();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mySidenav">
<li>
<a>parent 1</a>
<ul>
<li>list 1</li>
<li>list 2</li>
<li>list 3</li>
</ul>
</li>
<li><a>parent list 2</a>
<ul>
<li><a>list 4.1</a>
<ul>
<li>list 4.1.1</li>
<li>list 4.1.2</li>
</ul>
</li>
</ul>
</div>
$('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>
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
I am using mootools-more.1817.js...this is my HTML structure:
<ul id="categories">
<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>
So I want to do two things:
Be able to drag each li item to another section and have it take all its children with it. E.g. if I am dragging the li that has the link Top Links, I want to drag not only the words Top Links, but also the div#admin, ul and li that are children of that parent li. Essentially all the children of each li.
I would also like to be able to drag items between lists of the children. So for instance, say I want to drag the link Link 2 from that ul to the section called Awesome Links and drop it between the links Link 11 and Link 12.
I have done this:
window.addEvent('domready', function(){
new Sortables('#categories', {
clone: true,
revert: true,
opacity: 0.7
});
});
What that does is drags JUST the li, and not the children of the li.
How do I achieve those?
Thanks.
First, you have invalid HTML by having div items in your categories list that are not in li tags themselves. The only immediate children to a ul can be li for a valid list.
Second, according to the documentation, "To enable sorting between lists, one or more lists or id's must be passed using an array or a selector" (http://mootools.net/docs/more/Drag/Sortables). That means, to move items between your sublists, each ul must be passed into a sortables group (different than the categories group). This should solve your issue #2.
I'm not yet sure why it would not drag the whole contents of the li, though it may be the invalid HTML is causing issues.
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