标签:体验 mamicode obj 状态 each ide inf return 操作
折叠和非折叠效果如左右图所示
代码如下
//折叠 $.fn.jAccordionfold = function() { return this.each(function() { var obj = $(this); obj.find(‘.jgui-accordion-navitem‘).siblings("dd").slideUp(); obj.find(‘.jgui-accordion-navitem span‘).hide(); obj.find(‘.jgui-accordion-navitem .jgui-accordion-navitem-more‘).hide(); }); }; //展开 $.fn.jAccordionunfold = function() { return this.each(function() { var obj = $(this); obj.find(‘.jgui-accordion-navitem-more.expanded‘).closest(".jgui-accordion-navitem").siblings("dd").slideDown(); obj.find(‘.jgui-accordion-navitem span‘).show(); obj.find(‘.jgui-accordion-navitem .jgui-accordion-navitem-more‘).show(); }); };
把所有展开的抽屉项折叠起来,再改变Accordion的宽度即可实现上图效果,收到侧边栏后,点击任意图标能够恢复到正常非折叠状态进行操作。
$(‘#folderbtn‘).click(function(event) { if($(‘#leftpanel‘).is(‘.unfold‘)){//未折叠 $(‘#leftpanel‘).width(50); $(‘#centerpanel‘).css(‘left‘,‘50px‘); $(‘#mainlogo‘).html(‘J‘); $(‘#menuaccordion‘).jAccordionfold(); } else{ $(‘#leftpanel‘).width(300); $(‘#centerpanel‘).css(‘left‘,‘300px‘); $(‘#mainlogo‘).html(‘JGUI DEMO‘); $(‘#menuaccordion‘).jAccordionunfold(); } $(‘#leftpanel‘).toggleClass(‘unfold‘); $(‘#folderbtn‘).toggleClass(‘icon-menu-unfold icon-menu-fold‘); }); $("#menuaccordion .jgui-accordion-navitem").click(function(event) { if(!$(‘#leftpanel‘).is(‘.unfold‘)){ $(‘#leftpanel‘).width(300); $(‘#centerpanel‘).css(‘left‘,‘300px‘); $(‘#mainlogo‘).html(‘JGUI DEMO‘); $(‘#menuaccordion‘).jAccordionunfold(); $(‘#leftpanel‘).toggleClass(‘unfold‘); $(‘#folderbtn‘).toggleClass(‘icon-menu-unfold icon-menu-fold‘); } });
目前折叠起来的图标没有带tooltip或者菜单,如果有更好的用户体验,当鼠标放到折叠的菜单上时,应该显示一个tooltip或者菜单,这个将在以后实现。
标签:体验 mamicode obj 状态 each ide inf return 操作
原文地址:https://www.cnblogs.com/zhaogaojian/p/10440914.html