mirror of https://github.com/layui/layui
commit
b0eafb5e92
|
@ -120,6 +120,20 @@
|
|||
|
||||
`true`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>accordion <sup>2.8.18+</sup></td>
|
||||
<td>
|
||||
|
||||
是否开启手风琴效果
|
||||
|
||||
</td>
|
||||
<td>boolean</td>
|
||||
<td>
|
||||
|
||||
`false`
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
|
@ -21,6 +21,7 @@ toc: true
|
|||
|
||||
- 通过 `<ul class="layui-menu"></ul>` 命名基础菜单容器
|
||||
- 追加 `className` 为 `layui-menu-lg` 可设置基础菜单的大尺寸风格
|
||||
- 追加 `lay-accordion` 属性可设置手风琴效果 <sup>2.8.18+</sup>
|
||||
- 通过 `<li></li>` 放置菜单列表项
|
||||
- 属性:
|
||||
- 追加 `className` 为 `layui-menu-item-group` 可设置当前菜单为菜单组,即子菜单为纵向层级。
|
||||
|
|
|
@ -1201,7 +1201,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
|||
.layui-menu li,
|
||||
.layui-menu-body-title,
|
||||
.layui-menu-body-title a{padding: 5px 15px; color: initial}
|
||||
.layui-menu li{position: relative; margin: 1px 0; line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
|
||||
.layui-menu li{position: relative; margin: 0 0 1px; line-height: 26px; color: rgba(0,0,0,.8); font-size: 14px; white-space: nowrap; cursor: pointer; transition: all .3s;}
|
||||
.layui-menu li:hover{background-color: #f8f8f8; }
|
||||
.layui-menu li.layui-disabled,
|
||||
.layui-menu li.layui-disabled *{background: none !important; color: #d2d2d2 !important; cursor: not-allowed !important;}
|
||||
|
@ -1224,6 +1224,8 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
|||
.layui-menu .layui-menu-item-down:hover{cursor: pointer;}
|
||||
.layui-menu .layui-menu-item-up>.layui-menu-body-title{ color: rgba(0,0,0,.8);}
|
||||
.layui-menu .layui-menu-item-up>ul{visibility: hidden; height: 0; overflow: hidden;}
|
||||
.layui-menu .layui-menu-item-down>.layui-menu-body-title>.layui-icon-down{transform: rotate(180deg);}
|
||||
.layui-menu .layui-menu-item-up>.layui-menu-body-title>.layui-icon-up{transform: rotate(-180deg);}
|
||||
.layui-menu .layui-menu-item-up>.layui-menu-body-title:hover>.layui-icon,
|
||||
.layui-menu .layui-menu-item-down:hover>.layui-menu-body-title>.layui-icon{color: rgba(0,0,0,1);}
|
||||
.layui-menu .layui-menu-item-down>ul{visibility: visible; height: auto;}
|
||||
|
@ -1237,7 +1239,7 @@ body .layui-table-tips .layui-layer-content{background: none; padding: 0; box-sh
|
|||
.layui-menu-body-title{position: relative; margin: -5px -15px; overflow: hidden; text-overflow: ellipsis;}
|
||||
.layui-menu-body-title a{display: block; margin: -5px -15px; color: rgba(0,0,0,.8);}
|
||||
.layui-menu-body-title a:hover{transition: all .3s;}
|
||||
.layui-menu-body-title>.layui-icon{position: absolute; right: 15px; top: 50%; margin-top: -6px; line-height: normal; font-size: 14px;}
|
||||
.layui-menu-body-title>.layui-icon{position: absolute; right: 15px; top: 50%; margin-top: -6px; line-height: normal; font-size: 14px; transition: all .2s; -webkit-transition: all .2s;}
|
||||
.layui-menu-body-title>.layui-icon:hover{transition: all .3s;}
|
||||
.layui-menu-body-title>.layui-icon-right{right: 14px;}
|
||||
.layui-menu-body-panel{display: none; position: absolute; top: -7px; left: 100%; z-index: 1000; margin-left: 13px; padding: 5px 0;}
|
||||
|
|
|
@ -102,7 +102,8 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
|||
isSpreadItem: true, // 是否初始展开子菜单
|
||||
data: [], // 菜单数据结构
|
||||
delay: 300, // 延迟关闭的毫秒数,若 trigger 为 hover 时才生效
|
||||
shade: 0 // 遮罩
|
||||
shade: 0, // 遮罩
|
||||
accordion: false // 手风琴效果,仅菜单组生效。基础菜单需要在容器上追加 'lay-accordion' 属性。
|
||||
};
|
||||
|
||||
// 重载实例
|
||||
|
@ -343,12 +344,12 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
|||
|
||||
// 触发菜单组展开收缩
|
||||
that.elemView.find(STR_GROUP_TITLE).on('click', function(e){
|
||||
var othis = $(this)
|
||||
,elemGroup = othis.parent()
|
||||
,data = elemGroup.data('item') || {}
|
||||
var othis = $(this);
|
||||
var elemGroup = othis.parent();
|
||||
var data = elemGroup.data('item') || {};
|
||||
|
||||
if(data.type === 'group' && options.isAllowSpread){
|
||||
thisModule.spread(elemGroup);
|
||||
thisModule.spread(elemGroup, options.accordion);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -442,17 +443,32 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
|||
};
|
||||
|
||||
// 设置菜单组展开和收缩状态
|
||||
thisModule.spread = function(othis){
|
||||
// 菜单组展开和收缩
|
||||
thisModule.spread = function(othis, isAccordion){
|
||||
var needSpread = othis.hasClass(STR_ITEM_UP);
|
||||
var elemIcon = othis.children('.'+ STR_MENU_TITLE).find('.layui-icon-' + (needSpread ? 'down' : 'up'));
|
||||
if(needSpread){
|
||||
othis.removeClass(STR_ITEM_UP).addClass(STR_ITEM_DOWN);
|
||||
elemIcon.removeClass('layui-icon-down').addClass('layui-icon-up');
|
||||
} else {
|
||||
othis.removeClass(STR_ITEM_DOWN).addClass(STR_ITEM_UP);
|
||||
elemIcon.removeClass('layui-icon-up').addClass('layui-icon-down');
|
||||
|
||||
var toggle = function (groupElem, isOpen) {
|
||||
var contentElem = groupElem.children('ul');
|
||||
var contentHeight = contentElem[0].scrollHeight;
|
||||
|
||||
if(contentElem.is(':animated')) return;
|
||||
|
||||
groupElem.removeClass(isOpen ? STR_ITEM_UP : STR_ITEM_DOWN).addClass(isOpen ? STR_ITEM_DOWN : STR_ITEM_UP);
|
||||
contentElem.height(isOpen ? 0 : contentHeight)
|
||||
.stop()
|
||||
.animate({
|
||||
opacity: isOpen ? 1 : 0,
|
||||
height: isOpen ? contentHeight : 0
|
||||
}, 200, function(){
|
||||
contentElem.css({ height: '', opacity: '' })
|
||||
})
|
||||
}
|
||||
|
||||
toggle(othis, needSpread);
|
||||
|
||||
if (!needSpread || !isAccordion) return;
|
||||
layui.each(othis.siblings('.' + STR_ITEM_DOWN), function(index, item){
|
||||
toggle($(item), false);
|
||||
})
|
||||
};
|
||||
|
||||
// 全局事件
|
||||
|
@ -535,9 +551,10 @@ layui.define(['jquery', 'laytpl', 'lay', 'util'], function(exports){
|
|||
var othis = $(this);
|
||||
var elemGroup = othis.parents('.'+ STR_ITEM_GROUP +':eq(0)');
|
||||
var options = lay.options(elemGroup[0]);
|
||||
var isAccordion = typeof othis.parents('.layui-menu').eq(0).attr('lay-accordion') === 'string';
|
||||
|
||||
if(('isAllowSpread' in options) ? options.isAllowSpread : true){
|
||||
thisModule.spread(elemGroup);
|
||||
thisModule.spread(elemGroup, isAccordion);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue