<script>
    $(function () {
        $('li>span').click(function (event) {
            /* Act on the event */
            if ($(this).parent('li').find('ul').length > 0) {
                $(this).html("-");
                if ($(this).siblings('ul').is(':hidden')) {
                    $(this).parent('li').addClass('open').children('ul').show();
                    $(this).parent('li').siblings().removeClass('open').children('ul').hide();
                } else {
                    $(this).html("+");
                    $(this).parent('li').removeClass('open').children('ul').hide();
                }
            } else { 
                $(this).parent('li').siblings().removeClass('open');
            }
            $(this).parent('li').siblings().children('ul').hide(); 
        })
    })
</script>
<style>
    ul { list-style: none; }
    ul li { cursor: pointer; } 
    ul li ul { display: none; padding-left: 20px; }
    ul span { border:1px solid ; width:10px; height:10px; text-align:center;line-height:10px;    display: inline-table;}
    
</style>


<div>
    <ul>
        <li>
            <span>+</span>1
            <ul>
                <li>
                    <span>+</span>  5 
                    <ul>
                        <li> <span>+</span>1 
                            <ul>
                                <li>1</li>
                                <li>2</li>
                                <li>3</li> 
                              </ul>
                        </li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
        </li>
    </ul>
</div>
 

效果圖