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

Posted 2021-02-11 zhaogaojian

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

代码如下

//折叠
$.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或者菜单，这个将在以后实现。