easyui的accordion下级设置了headerCls以后,panel-header的高度变成0了。

forai 发布于 2016/11/16 11:55
阅读 849
收藏 0

项目的左侧导航栏用的easyui的accordion,我想改变这一块的高度和字体,所以设置了headerCls,但是headerCls设置了以后,panel-header的变成了0.没办法控制。请问一下有没有哪位兄弟知道如何处理。

css如下:

.easyui-menu1 {
    height: 60px;
}


页面代码如下:

<div data-options="region:'west',split:true,title:'&nbsp;导航菜单',iconCls:'aiicon-home',hideCollapsedContent:false" style="width:180px;">
    <div class="easyui-accordion" style="width:100%">
        <div title="About" data-options="iconCls:'icon-ok',headerCls:'easyui-menu1'" style="overflow:auto;padding:10px;">
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>
            <p>Accordion is a part of easyui framework for jQuery. It lets you define your accordion component on web page more easily.</p>
        </div>
        <div title="Help" data-options="iconCls:'icon-help',headerCls:'easyui-menu1'" style="padding:10px;">
            <p>test</p>
        </div>
    </div>
</div>



修改后的效果是这样的:


查看了html元素是这样的:




加载中
0
forai
forai
.ai-menu {
    height: 100% !important;
}
.ai-menu .panel-title {
    font-size: 16px;
    font-weight: lighter;
    color: #84c5f1 !important;
    height: 24px;
    line-height: 24px;
    padding-right: 10px;
    text-align: left;
}


修改后的css。

页面使用情况:


<div class="easyui-accordion ai-menu" fit="true" border="false" id="nav" style="height: auto;">



重点就在easyui-accordion后面直接加上ai-menu 就行了。


ps:我换了一个css的名称。对应上面的easyui-menu1


0
喵之萌杀
<div class="easyui-accordion" style="width:100%" data-options="headerCls:'easyui-menu1'">
0
forai
forai

引用来自“喵之萌杀”的评论

<div class="easyui-accordion" style="width:100%" data-options="headerCls:'easyui-menu1'">
兄弟,这样设置不起效,class都没有加上。
forai
forai
回复 @喵之萌杀 : 按照你说的我直接在easyui-accordion后面加上了class,修改了一下css 可以了。谢谢了 兄弟
喵之萌杀
设置了之后把里面的headerCls删掉,表头设置不要写在里面
喵之萌杀
class 不是accordion样式吗 在前面呀
喵之萌杀
诶 我复制你代码这样改可以了啊
0
Jeremy_pan
Jeremy_pan

之前在火狐遇到这个问题、我是判断easyui  js (easyui/jquery.easyui.min.js)异步加载完成,然后修改高度

var ua = navigator.userAgent.toLowerCase();
        if (ua.indexOf("firefox")!=-1){
             
             $.holdReady(true);    //hold住,等待a.js加载,后续代码不能执行
             $.getScript('a.js',function(){
                    $.holdReady(false);     //释放,a.js加载完成,继续执行后续代码
              // 修改高度的代码
               $(".test").height(16);

             });  
        }

参考:http://www.cnblogs.com/telnetzhang/p/5827791.html

返回顶部
顶部