try: 具收摺效果的選單

for blog

by cactus77kiki

HTML

<!--try:tree(blog文章分類)-->
<link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<!--source:  according to jsfiddle(1nmg1v8s) to fix to myself style-->

<!--<div  style="margin-top:30px;">-->
    <div class="row">
        <div class="col-md-4">
            <ul id="tree1">
                <li><a href="#">分類</a>

                    <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>
                        <!--section2-->
                        <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>     
                                  ...

CSS

.tree{
	font-family: Microsoft YaHei;
	font-size: 0.95em;	
}

body{
  //background-color:#FFF
}
.tree, .tree ul {
    margin:0;
    padding:0;
    list-style:none
}
.tree ul {
    margin-left:1em;
    position:relative
}
.tree ul ul {
    margin-left:.5em
}
.tree ul:before {
    content:"";
    display:block;
    width:0;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    //border-left:1px solid
}
.tree li {
    margin:0;
    padding:0 1em;
    //line-height:2em;
    line-height:1.7em;
    //color:#369;
    font-weight:700;
    position:relative
}
.tree ul li:before {
    content:"";
    display:block;
    width:10px;
    height:0;
    //border-top:1px solid;
    margin-top:-1px;
    position:absolute;
    top:1em;
    left:0
}
.tree ul li:last-child:before {
    //background:#fff;
    height:auto;
    top:1em;
    bottom:0
}
.indicator {
    margin-right:5px;
}
.tree li a {
    text-decoration: none;
    //color:#369;
}
.tree li button, .tree li button:active, .tree li button:focus {
    text-decoration: none;
    //color:#369;
    border:none;
    background:transparent;
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    outline: 0;
}

JavaScript

$.fn.extend({
    treed: function (o) {
      
      /*var openedClass = 'glyphicon-minus-sign';
      var closedClass = 'glyphicon-plus-sign';*/
      var openedClass = 'fa fa-folder-open-o icon-lg';
      var closedClass = 'fa fa-folder-o icon-lg';
      
      if (typeof o != 'undefined'){
        if (typeof o.openedClass != 'undefined'){
        openedClass = o.openedClass;
        }
        if (typeof o.closedClass != 'undefined'){
        closedClass = o.closedClass;
        }
      };
      
        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator  " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
      tree.find('.branch .indicator').each(function(){
        $(this).on('click', function () {
            $(this).closest('li').click();
        });
      });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
      ...