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

Question

项目的左侧导航栏用的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元素是这样的：

Answer 1

之前在火狐遇到这个问题、我是判断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

Answer 2

诶 我复制你代码这样改可以了啊

Answer 3

class 不是accordion样式吗 在前面呀

Answer 4

设置了之后把里面的headerCls删掉,表头设置不要写在里面

Answer 5

回复
按照你说的我直接在easyui-accordion后面加上了class，修改了一下css 可以了。谢谢了 兄弟

Answer 6

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

<div class="easyui-accordion" style="width:100%" data-options="headerCls:'easyui-menu1'">

Answer 7

<div class="easyui-accordion" style="width:100%" data-options="headerCls:'easyui-menu1'">

Answer 8

.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