我从多个页面获得了链接到我的 Accordion 网格所在的特定页面的链接。在页面加载时,我希望 Accordion 网格的目标部分自动为用户折叠。
以页面 A 和页面 B 为例。页面 A 是用户查看页面 B 上某些内容的位置。页面 B 有一个由 4 个部分(例如 1、2、3 和 4)组成的 Accordion 。如果用户单击从页面 A 到页面 B 的链接 2, Accordion 的数字 2 部分应该折叠起来供用户查看。
找到下面的代码:
HTML:
<div id="accord_bar">
<ul id="accordion">
<li><a href="#recent" class="heading">Number 1 Header</a>
<ul id="recent"><li>Number 1</li></ul>
</li>
<li><a href="#popular" class="heading">Number 2 Header</a>
<ul id="recent"><li>Number 2</li></ul>
</li>
<li><a href="#categories" class="heading">Number 3 Header</a>
<ul id="recent"><li>Number 3</li></ul>
</li>
<li><a href="#archive" class="heading">Number 4 Header</a>
<ul id="recent"><li>Number 4</li></ul>
</li></ul></div>
HEAD 标签中的 Javascipt:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion(
{active: "a.default", header: "a.heading"}
);
});
链接的 Accordion Jquery 文件:
<script type="text/javascript" src="js/jquery-ui-accordion.js"></script>
我真的需要尽快解决这个问题,如果有人可以提供帮助,我将非常感激......
最佳答案
您可以使用 jQuery 构建自己的简单 Accordion ,无需 ui。
用于折叠 Accordion 的特定部分 eq()
方法与这个简单的 Accordion 结构。
Here is jsFiddle with hover trigger.
jQuery:
$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion
$('.panel').hover(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('.content').stop(false,true).slideUp(600);
//used stop for prevent conflict
$('#'+takeID+'C').stop(false,true).slideDown(600);
///show's hovered ele's id macthed div
});
html:
<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1</div>
<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2</div>
<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3</div>
----------
Here is jsFiddle with click trigger and close button.
jQuery:
$('.content').slideUp(100);
$('.content').eq(1).slideDown(600);
//for collapsing second part of an accordion
$('.panel').click(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('#'+takeID+'C').slideDown(600);//show's clicked ele's id macthed div
});
$('span').click(function() {//close
var takeID = $(this).attr('id').replace('Close','');//strip close from id
$('#'+takeID+'C').slideUp(600);//hide clicked close button's panel
});
html:
<div class="panel" id="panel1">panel1</div>
<div class="content" id="panel1C">content1<span id="panel1Close">X</span></div>
<div class="panel" id="panel2">panel2</div>
<div class="content" id="panel2C">content2<span id="panel2Close">X</span></div>
<div class="panel" id="panel3">panel3</div>
<div class="content" id="panel3C">content3<span id="panel3Close">X</span></div>
注意:我之前已经回答过与此答案相关的 Accordion : collapse and expand tabs jquery / simple accordion
关于javascript - 如何折叠页面加载时风格的 Accordion 的特定部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12173658/