When I include the accordion, I find it always defaults to the first panel

Question

<%@include file="mainNavigation.jsp"%>

I don't like to copy the same code so I include the accordion, but when I open a new web, the accordion still at default panel. I try to write js to change the default panel, but it did not work.

${page} is the session to record it should be which panel.

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<script>
    window.onload=function () {
        var a=${page};
        if(a==2){
            $("#accordion").accordion("select","账户管理");
        }
    }
</script>
<div region="west" style="width: 200px" title="功能菜单" split="true">
    <div id="accordion" class="easyui-accordion" data-options="fit:true,border:false">
        <div id="accordion_1" title="账户管理" data-options="iconCls:'icon-ok'" style="padding: 10px">
            <a href="/web/userInfo" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" style="width: 150px">个人信息</a>
            <a href="/web/resetPassword" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" style="width: 150px">密码重置</a>
        </div>

        <div id="accordion_2" title="本地文件管理" data-options="iconCls:'icon-mini-add'"  style="padding: 10px">
            <a href="/web/fileSearch" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-search'" style="width: 150px;">文件搜索</a>
            <a href="/web/fileClassification" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-reload'" style="width: 150px;">文件分类</a>
        </div>

        <div id="accordion_3" title="云端文件管理" data-options="iconCls:'icon-tip'"  style="padding: 10px">
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">云端文件</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-tip'" style="width: 150px;">云端上传</a>
        </div>
    </div>
</div>

my English is not good......... – steven Jul 12 '18 at 07:01 — steven, Jul 12 '18 at 07:01

score 0 · Answer 1 · answered Jul 12 '18 at 07:36

0

You should be using the following code instead:

// Setter
$( ".selector" ).accordion( "option", "active", 2 );

For more details, you can access this link

answered Jul 12 '18 at 07:36

Ullas Hunka

2,119
1
15
28

score 0 · Accepted Answer · answered Jul 12 '18 at 07:52

0

I'm not sure why your code didn't work, but you can solve this problem by putting a tag.

<div title="账户管理" data-options="iconCls:'icon-help'" style="padding:10px;" selected>

Also, there is nothing wrong with your code.

$("#accordion-id").accordion("select", "title or index");

link

answered Jul 12 '18 at 07:52

Ballsigno

481
1
4
11

which JS should I import – steven Jul 15 '18 at 05:56
You mean, 'jQuery UI' or 'jquery.easyui'? I used 'jquery.easyui' because your code contains 'easyui-accordion' classes. or if you were talking about the answer I wrote, I think the first code is better unless you don't need the dynamic changes. – Ballsigno Jul 17 '18 at 07:57
I succeeded in changing a js file – steven Aug 07 '18 at 09:23

When I include the accordion, I find it always defaults to the first panel

2 Answers2