[英]how can I collapse a specific part of an accordion styled on page load
I have got links from several pages linking to a specific page where my accordion grid is. 我有几个页面的链接,这些链接链接到我的手风琴网格所在的特定页面。 And on page load I want the target part of the accordion grid to collapse automatically for the user.
在页面加载时,我希望手风琴网格的目标部分自动为用户折叠。
Take for example: Page A and Page B. Page A is where the user is coming from to view something on Page B. Page B has an accordion with 4 (eg 1,2,3 & 4) parts. 例如:页面A和页面B。页面A是用户从中查看页面B的来源。页面B的手风琴有4个(例如1,2,3和4)部分。 If the user click on link 2 from Page A to Page B, the number 2 part of the accordion should collapse for the user to see.
如果用户单击从页面A到页面B的链接2,则手风琴的数字2部分应该折叠起来,以供用户查看。
Find below the codes: 在下面找到代码:
HTML: 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>
Javascipt in the HEAD tag: HEAD标记中的Javascipt:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion(
{active: "a.default", header: "a.heading"}
);
});
Linked accordion Jquery file: 链接的手风琴Jquery文件:
<script type="text/javascript" src="js/jquery-ui-accordion.js"></script>
I really need to fix this asap and I will be very grateful if anyone can help... 我真的需要尽快修复此问题,如果有人可以提供帮助,我将非常感激。
You can built your own simple accorion with jQuery, no need ui. 您可以使用jQuery构建自己的简单标准,而无需ui。
For collapsing a specific part of an accordion with eq()
method with this simple accordion structure. 使用这种简单的手风琴结构,使用
eq()
方法折叠手风琴的特定部分。
Here is jsFiddle with hover trigger. 这是带有悬停触发器的jsFiddle。
jQuery: 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: 的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. 这是带有单击触发器和关闭按钮的jsFiddle。
jQuery: 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: 的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>
Note: I've answered accordion related this answer before: collapse and expand tabs jquery / simple accordion 注意:我之前已经回答过与手风琴有关的答案: 折叠和展开标签jquery /简单手风琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.