jquery tree

   <div class="fl left"  id="nav" style="width:18%" >
                <div class="leftnav">商品分类</div>
                <ul class="sui-nav nav-list nav-large mt10">
                   <li class="nav-header" >
                       <i class="sui-icon icon-touch-folder-right-sign"></i>
                       一级菜单
                       <ul class="sui-nav nav-list nav-large" style="display: none">
                           <li class="nav-header">
                               <i class="sui-icon icon-touch-folder-right-sign"></i>
                               二级菜单
                               <ul class="sui-nav nav-list nav-large" style="display: none">
                                   <li class="nav-header">
                                       <i class="sui-icon icon-touch-folder-right-sign"></i>
                                       三级菜单
                                   </li>
                                   <li style="display: none"><a>菜单子项 </a></li>
                               </ul>
                           </li>
                           <li style="display: none"><a>菜单子项 </a></li>
                       </ul>
                    </li>
                </ul>
            </div>

$(".nav-header").toggle(
function (event) {
if($(event.target).is("a")){
return;
}

event.stopPropagation();
$(this).find("ul:first").show();
$(this).find("i:first").removeClass("icon-touch-folder-right-sign").addClass("icon-touch-folder-right");
$(this).siblings().show();
},
function (event) {

if($(event.target).is("a")){
return;
}
event.stopPropagation();
$(this).find("ul:first").hide();
$(this).find("i:first").removeClass("icon-touch-folder-right").addClass("icon-touch-folder-right-sign");
$(this).siblings().hide();
})

posted @ 2016-09-01 15:38  积硅步  阅读(128)  评论(0编辑  收藏  举报