JGUI源码：Accordion折叠到侧边栏实现(6)

折叠和非折叠效果如左右图所示

代码如下

//折叠
$.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');
    }
  });

1、目前折叠起来的图标没有带tooltip或者菜单，如果有更好的用户体验，当鼠标放到折叠的菜单上时，应该显示一个tooltip或者菜单，这个将在以后实现。

2、目前的实现方法是在全局都可见的，应该使用一个accordion对象封装起来，也将后续实现。

优质内容筛选与推荐>>
1、纪念一个曾经的软件产品（七）——天气，短信，邮件
2、[源码和文档分享]基于JAVA实现的Huffman哈夫曼树编码与解码
3、并发编程《一》操作系统介绍1
4、Internal关键字
5、1389 乘积平均数

0 │ 收藏 │ 举报

朋友将在看一看看到

分享想法到看一看