我怎样才能折叠在页面加载样式的手风琴的特定部分 [英] how can I collapse a specific part of an accordion styled on page load
问题描述
我有几个页面的链接链接到手风琴网格所在的特定页面。在页面加载时，我希望手风琴网格的目标部分自动为用户折叠。
例如：页面A和页面B.页面A是用户来自于查看页面B上的内容。页面B具有4（例如1,2,3和4）部分的手风琴。如果用户点击从页面A到页面B的链接2，手风琴的编号2部分应该折叠以供用户看到。
查找代码：
HTML：
< div ID = accord_bar >
< ul id =accordion>
< li>< a href =＃recentclass =heading> Number 1 Header< / a>
< ul id =recent>< li> Number 1< / li>< / ul>
< / li>
< li>< a href =＃popularclass =heading> Number 2 Header< / a>
< ul id =recent>< li> 2号< / li>< / ul>
< / li>
< li>< a href =＃categoriesclass =heading> Number 3 Header< / a>
< ul id =recent>< li> 3号< / li>< / ul>
< / li>
< li>< a href =＃archiveclass =heading> Number 4 Header< / a>
< ul id =recent>< li> 4号< / li>< / ul>
< / li>< / ul>< / div>
HEAD标记中的Javascipt：
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃accordion'）。accordion（
{active：a.default，header：a.heading}
）;
}）;
file：
< script type =text / javascriptsrc =js / jquery-ui-accordion的.js>< /脚本>
我真的需要尽快解决这个问题，如果有人能帮助我，我将非常感激......
您可以使用jQuery构建自己的简单协议，无需使用ui。
为了折叠手风琴的特定部分，使用 eq（） 的方法。
< jQuery：
$（'。content'）。slideUp（100）;
$（'。content'）。eq（1）.slideDown（600）;
//用于折叠手风琴的第二部分
'（'。panel'）。hover（function（）{// open
var takeID = $（this）。 attr（'id'）; //从点击元素获取id
$（'。content'）。stop（false，true）.slideUp（600）;
//用于防止冲突
$（'＃'+ takeID +'C'）。stop（false，true）.slideDown（600）;
/// show's hovered ele's id macthed div
}）;
html：
< div class =panelid =panel1> panel1< / div>
< div class =contentid =panel1C> content1< / div>
< div class =panelid =panel2> panel2< / div>
< div class =contentid =panel2C> content2< / div>
< div class =panelid =panel3> panel3< / div>
< div class =contentid =panel3C> content3< / div>
----------
jQuery：
$（ '内容'）效果基本show（100）。
$（'。content'）。eq（1）.slideDown（600）;
//用于折叠手风琴的第二部分
'（'。panel'）。click（function（）{//打开
var takeID = $（this）。 attr（'id'）; //从被点击的元素获取id
$（'＃'+ takeID +'C'）。 $（'close'，''）; / b $ b $（'span'）。click（function（）{//关闭
var takeID = $（this）.attr（'id'）。 / strip close from id
'（'＃'+ takeID +'C'）。slideUp（600）; //隐藏点击关闭按钮的面板
}）;
$ b html：
< div class =panelid =panel1> panel1< / div>
< div class =contentid =panel1C> content1< span id =panel1Close> X< / span>< / div>
< div class =panelid =panel2> panel2< / div>
< div class =contentid =panel2C> content2< span id =panel2Close> X< / span>< / div>
< div class =panelid =panel3> panel3< / div>
< div class =contentid =panel3C> content3< span id =panel3Close> X< / span>< / div>
注意：我已经回答了有关此答案的手风琴：
合并和展开标签jquery / simple accordion
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 (e.g 1,2,3 & 4) parts. 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.
Find below the codes:
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:
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion(
{active: "a.default", header: "a.heading"}
);
});
Linked accordion Jquery file:
<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.
For collapsing a specific part of an accordion with eq() method with this simple accordion structure.
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>
Note: I've answered accordion related this answer before:
collapse and expand tabs jquery / simple accordion
这篇关于我怎样才能折叠在页面加载样式的手风琴的特定部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
