We Keep Coding

Why CKEditor adding empty bullet points for my custom tags?

I am getting extra blank bullet points for my HTML code in CKEditor. Also, the number of bullets are increasing when I change to source mode.https://stackblitz.com/edit/ng2-ckeditor-xck9uk?file=src/app/app.component.ts
<ul>
<my-tag id=""><li>test</li></my-tag>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
</ul>

How do I create an unlimited nested sortable list?

I built a simple sortable list without sub lists with jquery-ui. How can I add an option to nest an list item without having sub ul's allready
<div id="sorter">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
https://jsfiddle.net/2uup4jdd/
If I add a sub ul with html I can sort it as well but I can't create new ul's / sub list items in the runtime environment.
<div id="sorter">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<ul>
<li>Item Sub</li>
</ul>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
https://jsfiddle.net/2uup4jdd/1/
Is there a way to activate that? Any other ideas?

I use the nestedSortable plugin for that. (Demo). Works like a charm.
Thanks that will do the work :)
It seems far more complicated with unlimited nested list items.

JQuery: How to show current nested sub-menu and hide the others?

$('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>

Amazon Side Bar Menu with jquery

Does anybody knows how to resolve the issue in Amazon plugin when I try to put it on my site and put on the third level a checkbox or click somewhere on the div, the level div fades out. how to make the div stay?
This is the plugin
Amazon Plugin
<nav id="mysidebarmenu" class="amazonmenu">
<ul>
<li>Item 1</li>
<li>Folder 0
<div>
<p>Browse our spring collection of useful webmaster tools and resources! Everything from JavaScript, CSS to PHP are covered!</p>
<ul>
<li>JavaScript Kit</li>
<li>CSS Drive</li>
<li>CSS Library
<li>Webmaster Tools
<div>
<p><h3>Image Optimizer</h3>
Use this tool to easily optimize regular gifs, animated gifs, jpgs, and pngs, so they load as fast as possible.
</p>
<p><h3>FavIcon Generator</h3>
Generate a favicon using any regular image with this tool.
</p>
<p><h3>Animated Gif Generator</h3>
Animated Gif Generator lets you easily create an animated gif by uploading a series of still images!
</p>
</div>
<li>PHP For the Absolute Beginner</li>
</ul>
</div>
</li>
<li>Folder 1
<ul>
<li>Sub Item 1.1</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3
<ul>
<li>Sub Item 1.3.1</li>
<li>Sub Item 1.3.2</li>
<li>Sub Item 1.3.3</li>
</ul>
</li>
<li>Sub Item 1.4</li>
<li>Sub Item 1.2</li>
<li>Sub Item 1.3</li>
<li>Sub Item 1.4</li>
</ul>
</li>
<li>Item 3</li>
<li>Folder 2
<ul>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
<li>Sub Item 2.1</li>
</ul>
</li>
<li>Item 4</li>
</ul>
JS
jQuery(function(){
amazonmenu.init({
menuid: 'mysidebarmenu'
})
})

jQuery .click() .show() function issues

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