我怎么可以折叠样式在页面加载手风琴的特定部分(how can I collapse a specif

2019-09-30 05:03发布

我已得到几页链接到特定的页面,我的手风琴电网环节。 并在页面加载我想手风琴电网的目标部分为用户自动折叠。

举个例子:网页A和B.页网页A是其中用户是来自以查看页B.网页B的东西具有4(例如1,2,3和4)份的手风琴。 如果用户点击链接2从网页A到网页B,手风琴数量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>

javascipt的HEAD标记:

<script type="text/javascript">
$(document).ready(function() {
    $('#accordion').accordion(
    {active: "a.default", header: "a.heading"}
    );
});

链接手风琴jQuery的文件:

<script type="text/javascript" src="js/jquery-ui-accordion.js"></script>

我真的需要尽快解决这个问题,我将非常感激,如果有人能帮助...

Answer 1:

你可以建立自己的简单accorion使用jQuery,无需用户界面。

用于折叠具有手风琴的特定部分eq()方法用这个简单的手风琴结构。

这里的jsfiddle与悬停触发。

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>

----------

这里的jsfiddle与点击触发和关闭按钮。

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>

注:我已经回答了手风琴在此之前回答有关: 塌陷和膨胀标签的jQuery /简单手风琴



文章来源: how can I collapse a specific part of an accordion styled on page load