try: 具收摺效果的選單(jstreejs)

jstree

by cactus77kiki

HTML

<!--try:tree-jstree-->
<!--<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />-->
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/bonsai/0.4.5/bonsai.min.js"></script>-->


<div id="jstree_demo_div"  >
<!--<div id=""  >-->
<ul>
  <li>分類  
    <ul >
        <li >台灣
            <ul>
                <li >撮る
					<ul>
						<li>拎相機逛北部</li>
						<li>拎相機逛中部</li>
						<li>拎相機逛南部</li>
						<li>拎相機逛東部</li>
						<li>拎相機拍小品</li>
						<li>拎相機拍飛羽</li>
						<li>拎相機拍婚禮</li>
						<li>拎相機拍舞</li>
						<li>機絲頭</li>
						<li>其他</li>
					</ul>
				</li>
                <li>食べる
					<ul>
						<li>北部</li>
						<li>中部</li>
						<li>南部</li>
						<li>東部</li>						
					</ul>
				</li>
            </ul>
        </li>
		<li >國外
			<ul>
				<li>日本
					<ul>
						<li>其他日本資訊</li>
						<li>2007- 京阪</li>
						<li>2011- 北海道</li>
						<li>2012- 京阪</li>
						<li>2013- 京阪神奈</li>
						<li>2013- 九州</li>
						<li>2014- 東京</li>
						<li>2016- 高松神戶</li>
						<li>2016- 京都</li>
						<li>2017- 中部。京都</li>						
					</ul>
				</li>
				<li>歐洲
					<ul>
						<li>其他德奧資訊</li>
						<li>2015- 德奧</li>										
					</ul>
				</li>				
			</ul>
		</li>
		<li >生活
			<ul>
				<li>心情雜記</li>
				<li>譟咖筆記</li>
				<li>程式。開發筆記</li>				
			</ul>
		</li>        
    </ul>
    </li>
    </ul>
  </div>

CSS

.jstree li > a > .jstree-icon {  display:none !important; } 

/*.jstree-default .jstree-icon {
    //background-image: url(32px.png);
    display:none !important;
}*/

JavaScript

$(function () { $('#jstree_demo_div').jstree({
  /*"plugins" : ["types","wholerow"]*/
  /*"types": {
                 "default": {
                     "icon": "fa fa-folder icon-state-warning icon-lg"
                 },
                 "file": {
                     "icon": "fa fa-file icon-state-warning icon-lg"
                 }
             },*/
  "plugins" : ["wholerow"]
}); });

/*$('#tree1').tree({
    //data: data,
    autoOpen: true,
    //dragAndDrop: true
});*/
/*$('ul#music').bonsai();*/