Align items before treeview in ul / li - javascript

I have this sample of code:
<ul>
<li>group 1
<ul>
<li>group 1.1</li>
<li> group 1.2</li>
<li>group 1.3
<ul>
<li>group 1.3.1</li>
<li> group 1.3.2</li>
</ul>
</li>
</ul>
</li>
<li>group 2</li>
<li>group 3</li>
</ul>
I want to add some formatted numbers before this treeview all aligned vertically on the left so that the outouput would be something like:
<ul>
<li><span style="margin-left:-30px">10</span>group 1
<ul>
<li><span style="margin-left:-30px">20</span>group 1.1</li>
<li><span style="margin-left:-30px">15</span> group 1.2</li>
<li><span style="margin-left:-30px">07</span>group 1.3
<ul>
<li><span style="margin-left:-30px">100</span>group 1.3.1</li>
<li><span style="margin-left:-30px">08</span> group 1.3.2</li>
</ul>
</li>
</ul>
</li>
<li><span style="margin-left:-30px">90</span>group 2</li>
<li><span style="margin-left:-30px">110</span>group 3</li>
</ul>
I tried adding on the left and align the numbers in those but
that does not work.
Any suggestion ?
Thanks

Here is the solution using CSS. Let me know if this help you out.
.top-level-list {
position: relative;
padding-left: 80px;
}
li>span:first-child {
position: absolute;
left: 0px;
}
<html>
<body>
<ul class="top-level-list">
<li><span>1000.</span>group 1</li>
<ul>
<li><span>20.</span>group 1.1</li>
<li><span>15.</span>group 1.2</li>
<li><span>07.</span>group 1.2</li>
<li><span>102220.</span>group 1.3</li>
<ul>
<li><span>083113.</span>group 1.3.1</li>
<li><span>17.</span>group 1.3.2</li>
</ul>
</ul>
<li><span>90189.</span>group 2</li>
<li><span>110.</span>group 3</li>
</ul>
</body>
</hmtl>

your code looking like your example output...
whats your problem? the look of the points?- this is done in css.
li {
liststyle: disc, circle,......;
}
sorry for missunderstanding in advance.

Related

Apply class to parent UL if child LI contains specific class

I'm currently working on a side menu that will list all pages in the relative section. I pretty much have this sorted apart from 1 small thing. We have 2 levels of dropdowns meaning there are an awful lot of links.
The LI that is active will have the class of .current_page_item. I'm trying to work out a way of saying:
If the UL has a child LI containing .current_page_item class then apply .side_open class to the UL.
$(document).ready(function(){
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>
If anyone has any ideas on how this can be done your help would be greatly appreciated!
From what I understand, you want to style the direct parent if the li is selected.
(Comment me if I'm wrong)
So, the following should be what you want to achieve:
(Done with some Javascript)
$(document).ready(function() {
$('ul>li>ul>li').each(function() {
if ($(this).hasClass('current_page_item')) {
$(this).parent().addClass('side_open');
}
});
});
.side_open {
background: #ddd;
}
.current_page_item {
background: #bbb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Demo 1
<ul>
<li class="current_page_item">Demo 11</li>
</ul>
</li>
<li>Demo 2
<ul>
<li>Demo 21</li>
</ul>
</li>
<li>Demo 3
<ul>
<li>Demo 31</li>
</ul>
</li>
<li>Demo 4
<ul>
<li>Demo 41</li>
</ul>
</li>
</ul>
You can use .parentElement property to access li's ul.
const linksArray = [...document.querySelectorAll('li')];
linksArray.forEach(link => {
link.onclick = function() {
linksArray.forEach(link => link.classList.remove('current_page_item'))
this.classList.add('current_page_item')
this.parentElement.classList.add('side_open')
}
})
.current_page_item {
background-color: aliceblue;
}
.side_open:before {
content: 'I have side open class';
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
You can do it using jquery. It's very simple, using each loop, traverse and check for class in each LI and add .side_open class in it's parent if that li has .current_page_item class.
$(document).ready(function(){
$('ul.main_ul>li>ul.sub_ul>li').each(function(){
if($(this).hasClass('current_page_item')){
$(this).parent().addClass('side_open');
}
});
});
.side_open {
background-color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main_ul">
<li class="main_li">Demo 1
<ul class="sub_ul">
<li class="current_page_item">Demo 11</li>
<li class="current_page_item">Demo 12</li>
</ul>
</li>
<li class="main_li">Demo 2
<ul class="sub_ul">
<li>Demo 21</li>
<li>Demo 22</li>
</ul>
</li>
<li class="main_li">Demo 3
<ul class="sub_ul">
<li>Demo 31</li>
<li>Demo 32</li>
</ul>
</li>
<li class="main_li">Demo 4
<ul class="sub_ul">
<li>Demo 41</li>
<li>Demo 42</li>
</ul>
</li>
</ul>

Dropdown submenu issue

I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D
I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>

Float left and right in same UL

I have a unordered list
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
I want the items to be displayed horizontal. The items with the left class on the left site and the others on the right site.
I want to use smartmenus, for this reason I need a unordered list.
Here is the plunkr: http://plnkr.co/edit/GhgAWHv78qerLDcKgKDm?p=preview
On the basis of my understanding from your post, this is your desired result
.left{float:left}
.right{float:right}
ul{list-style:none}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
You can use flex-box if you can have a "filler" element between left and right.
ul {
display: flex;
list-style: none;
}
.filler {
flex: 1 0 auto;
}
<ul id="smart-menu">
<li class="left">item 1</li>
<li class="left">item 2</li>
<li class="left">item 3</li>
<li class="filler"></li>
<li class="right">item 4</li>
<li class="right">item 5</li>
</ul>
check out this pen: http://codepen.io/anon/pen/pJpBjq
and here is a guide to flex-box

Class descendants disrupting events

I have a simple drop down menu. When you click .drop-down, a sub menu slides down. However, if you click any of the children of .drop-down, it slides back up again. I want only the .drop-down that was clicked to slide the menu, none of the its descendents.
Here it is in action: http://jsfiddle.net/tmyie/uXn5k/2/
<ul>
<li class="drop-down">
Main
<ul class="sub-menu">
<li>Sub </li>
<li>Sub </li>
<li>Sub </li>
</ul>
</li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
</ul>
jQuery
$( ".drop-down" ).click(function() {
$('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
http://jsfiddle.net/tmyie/uXn5k/2/
Target the a specifically
$( ".drop-down>a" ).click(function() {
$('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
Or, just move the class from the li to the a
<ul>
<li>
Main
<ul class="sub-menu">
<li>Sub </li>
<li>Sub </li>
<li>Sub </li>
</ul></li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
<li>Main </li>
</ul>
EDIT:
By the way, you're going to run into trouble with multiple dropdowns using this script. Consider making the following changes:
$( ".drop-down>a" ).on("click", function() {
$(this).siblings('.sub-menu').slideToggle();
});
$('.drop-down').fadeTo('slow', 0.3);
http://jsfiddle.net/uXn5k/6/

JQuery slideToggle for multicolumn list

I`ve got a big list with the width of li 33%, so there are 3 columns.
computers monitors hi-fi
sex-toys pancakes scissors
In each of them there is UL hidden, which on click slideToggle.
JQuery
$('.subCategory > .parentleaf:has(ul) > .categoryicon').click(function() {
$(this).siblings('ul').slideToggle('fast');
});
The problem that dont slide as I want, they rebuld the list every time, like so
computers monitors hi-fi
[li]cars sex-toys pancakes
[li]dogs scissors
I want to slide them this way:
computers monitors hi-fi
[li]cars pancakes scissors
[li]dogs
sex-toys
How can I achieve this??
jsFiddle
jsFiddle 2 - in this case need the red bg color be for 3 columns
I added a clearer div between every three li
<ul class="subCategory">
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Cars</span>
<ul class="submenu">
<li>Car 1</li>
<li>Car 2</li>
<li>Car 3</li>
<li>Car 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Phones</span>
<ul class="submenu">
<li>Phone 1</li>
<li>Phone 2</li>
<li>Phone 3</li>
<li>Phone 4</li>
</ul>
</li>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Guns</span>
<ul class="submenu">
<li>Gun 1</li>
<li>Gun 2</li>
<li>Gun 3</li>
<li>Gun 4</li>
</ul>
</li>
<div class="clearer"></div>
<li class="parentleaf">
<span class="categoryicon">click</span>
<span class="categoryname">Notebooks</span>
<ul class="submenu">
<li>Notebook 1</li>
<li>Notebook 2</li>
<li>Notebook 3</li>
<li>Notebook 4</li>
</ul>
</li>
CSS
.clearer
{
clear:both;
}
You can also get the index of the current clicked li and with some math add a clearer div on click and remove it when needed but there I think there is no need for this

Categories