JSP页面
一. 实现点击查询时,查询区域自动关闭,清单列表展开,且区域上的‘+’‘-’标识自动转换
二. 实现关闭查询区域时,清单列表自动展开,或相反,不可同时关闭(只限于accordion中存在两个div时)
<div id="accordion1" style="width:100%">
<div id="cond" title="查询区域">
<input type="button" class="button" value="查询" οnclick="query()"></td>
</div>
<div id="list" title="清单列表" lselected=true>
</div><div id="maingrid"></div>
</div>
问题一实现方法(可参考chrome浏览器查看源码)
function query(){
$("#cond").hide();
$("#list").show();
$("#accordion1 .l-accordion-header:first-child div:first-child").removeClass('l-accordion-toggle-open');
$("#accordion1 .l-accordion-header:first-child div:first-child").addClass('l-accordion-toggle-close');
$("#cond").next().children().first().removeClass('l-accordion-toggle-close');
$("#cond").next().children().first().addClass('l-accordion-toggle-open');
}
问题二解决办法,修改ligerAccordion.js中源码
$(">.l-accordion-header", g.accordion).click(function ()
{
var togglebtn = $(".l-accordion-toggle:first", this);
if (togglebtn.hasClass("l-accordion-toggle-close"))
{
togglebtn.removeClass("l-accordion-toggle-close")
.removeClass("l-accordion-toggle-close-over l-accordion-toggle-open-over")
togglebtn.addClass("l-accordion-toggle-open");
$(this).next(".l-accordion-content")
.show(p.speed)
.siblings(".l-accordion-content:visible").hide(p.speed);
$(this).siblings(".l-accordion-header").find(".l-accordion-toggle").removeClass("l-accordion-toggle-open").addClass("l-accordion-toggle-close");
}
else
{
togglebtn.removeClass("l-accordion-toggle-open")
.removeClass("l-accordion-toggle-close-over l-accordion-toggle-open-over")
.addClass("l-accordion-toggle-close");
$(this).next(".l-accordion-content").hide(p.speed);
// 20131225 djj (仅限于两个div 新增这部分即可实现)
$(this).siblings(".l-accordion-header").find(".l-accordion-toggle").removeClass("l-accordion-toggle-close").addClass("l-accordion-toggle-open");
$(this).siblings(".l-accordion-header").next(".l-accordion-content").show(p.speed);
}
});