Display multi-level tree list, such as - http://www.gigalight.com.cn/products_list.html

treelist.html

{% macro show_ps(ps) %}

<!-- level 1 -->
<ul class="ps-lv1-list">
	{% for mt in ps %}
	<li class="ps-lv1" data-id="{{ mt.MainTypeID }}">
		<span class="li-header li-header-right"></span><a href="{{ url_for('mtype', mtype_id=mt.MainTypeID) }}">{{ mt.Name }}</a>

		<!-- level 2 -->
		<ul class="ps-lv2-list">	
			{% for st in mt.stypes %}
			<li class="ps-lv2" data-id="{{ st.SubTypeID }}">
				<span class="li-header li-header-right"></span><a href="{{ url_for('stype', stype_id=st.SubTypeID) }}">{{ st.Name|truncate(18, True) }}</a>

				<!-- level 3 -->
				<ul class="ps-lv3-list">
					{% for p in st.products %}
					<li class="ps-lv3" data-id="{{ p.ProductID }}">
						<span class="li-header li-header-grayright"></span><a href="{{ url_for('product', product_id=p.ProductID) }}">{{ p.Name|truncate(18, True) }}</a>
					</li>
					{% endfor %}
				</ul>
			</li>
			{% endfor %}
		</ul>
	</li>
	{% endfor %}
</ul>

{% endmacro %}

treelist.js

/* Extract tree list base on the current item's level and id 
 *
 * level: the current item level
 * id: the current item identity
 */

function init_ps(level, id){
	if(level == 1){
		$('.ps-lv1').each(function(index, mt){

			if($(this).attr('data-id') == id){
				// hilight itself
				$(this).children('a').css('color', 'red');

				// show level 2 list
				$(this).children('.li-header').removeClass('li-header-right').addClass('li-header-down');
				$(this).children('ul').show();
			}
		});
	}

	if(level == 2){
		$('.ps-lv2').each(function(index, st){
			if($(this).attr('data-id') == id){
				// hilight itself
				$(this).children('a').css('color', 'red');

				// show level 3 list
				$(this).children('.li-header').removeClass('li-header-right').addClass('li-header-down');
				$(this).children('ul').show();
				
				// show level 2 list
				$(this).parents('.ps-lv2-list').prev().prev().removeClass('li-header-right').addClass('li-header-down');
				$(this).parents('.ps-lv2-list').show();
			}
		});
	}

	if(level == 3){
		$('.ps-lv3').each(function(index, p){
			if($(this).attr('data-id') == id){
				// hilight itself
				$(this).children('a').css('color', 'red');

				// show level 3 list
				$(this).parents('.ps-lv3-list').prev().prev().removeClass('li-header-right').addClass('li-header-down');
				$(this).parents('.ps-lv3-list').show();

				// show level 2 list
				$(this).parents('.ps-lv2-list').prev().prev().removeClass('li-header-right').addClass('li-header-down');
				$(this).parents('.ps-lv2-list').show();
			}
		});
	}
}

treelist.less

// component products sidebar
//-----------------------------------------------------
.ps-lv1-list{
	margin-left: 0px;

	ul{
		margin-left: 0px;
	}

	li{
		list-style: none;
		font-size: 13px;
		margin: 10px 0;

		a{
			display: inline-block;
			color: #333;
		}
	}

	.li-header{
		display: inline-block;
		background-repeat: no-repeat;
		padding-right: 8px;
		cursor: pointer;
	}
	.li-header-right{
		background-image: url('../img/arrow-right.gif');
		width: 7px;
		height: 10px;
	}
	.li-header-grayright{
		background-image: url('../img/arrow-gray.gif');
		width: 7px;
		height: 10px;
	}
	.li-header-down{
		background-image: url('../img/arrow-down.gif');
		width: 7px;
		height: 7px;
	}

	.ps-lv2-list{
		margin-left: 15px;
		display: none;
		
		.ps-lv3-list{
			margin-left: 30px;
			display: none;
		}
	}
}