ساخت Tree View تودرتو با استفاده از jQuery

در این مقاله یک درخت یک لیست تو در تو را به وسیله Jquery پیاده سازی میکنیم. این Tree View زیر شاخه های خود را به صورت انیمیشن و با مدت زمانی کوتاه برای باز شدن نمایش می دهد.

ساخت Tree View تودرتو  با استفاده از jQuery

یک فایل html با نام AutoCollapseTreeView.html ایجاد نمایید. 


<ul id="Decor">
        <li class="level1">خانه من
	        <ul>
                <li class="level2">کار من
		            <ul>
                        <li><a href="#">برنامه نویسی</a></li>
                        <li><a href="#">اموزش</a></li>
                    </ul>
                </li>
                <li class="level2">تفریح من
		            <ul>
                        <li><a href="#">برنامه نویسی</a></li>
                        <li><a href="#">کتاب خواندن</a></li>
                    </ul>
                </li>
                <li class="level2">سفر من
		            <ul>
                        <li><a href="#">شمال</a></li>
                        <li><a href="#">جنوب</a></li>
                        <li><a href="#">برنامه دیگه ای ندارم</a></li>
                    </ul>
                </li>
                <li class="level2">ایده های من
		            <ul>
                        <li class="level3">اولین ایده
			            <ul>
                            <li><a href="#">برنامه خوب</a></li>
                            <li><a href="#">برنامه عالی</a></li>
                        </ul>
                        </li>
                        <li class="level3">اوقات فراغت
			            <ul>
                            <li><a href="#">پارک</a></li>
                            <li><a href="#">بازار</a></li>
                        </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="level1">برنامه روزانه
	        <ul>
                <li><a href="#">خواب</a></li>
                <li><a href="#">کار</a></li>
                <li><a href="#">تفریح</a></li>
            </ul>
        </li>
        <li class="level1">گردش کاری
	        <ul>
                <li><a href="#">تهران</a></li>
                <li><a href="#">کرج</a></li>
            </ul>
        </li>
    </ul>

 

همانطور که میبینید درخت ما فاقد هر گونه استایلی میباشد.حال  از کد Jquery  زیر استفاده میکنیم.

$(function () {
    $('#Decor ul').hide(600);
 
    $('#Decor li').on('click', function (e) {
        e.stopPropagation();
        $(this).children('ul').slideToggle();
    });
});
$('#Decor ul').hide(600);

این کد زمان 600 میلی ثانیه را در نظر میگیرد و همه زیر شاخه ها را مخفی میکند.

$('#Decor li').on('click', function (e) {
    e.stopPropagation(); // prevent links from toggling the nodes
    $(this).children('ul').slideToggle();
});

در اینجا ما رویداد کلیک را داریم برای کلیک روی هر ایتم li. 

برای راه انداختن این کد منابع Jquery مورد نیاز است.

فایل های ضمیمه