Javascript 如何在页面加载时折叠手风琴样式的特定部分

我有几个页面的链接，链接到我的手风琴网格所在的特定页面。在页面加载时，我希望accordion网格的目标部分为用户自动折叠

举个例子：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="#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>

第一名


第二名


第三名


第4号

HEAD标签中的Javascipt:

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

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

$('.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
});​

<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>

$('.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
});​

<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>

$（文档）.ready（函数（）{
$（'手风琴'）。手风琴(
{活动：“a.default”，标题：“a.heading”}
);
});

链接的手风琴Jquery文件：

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

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

$('.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
});​

<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>

$('.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
});​

<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构建自己的简单账户，无需ui

用这种简单的手风琴结构折叠手风琴的特定部分

jQuery:

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

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

$('.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
});​

<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>

$('.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
});​

<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>

html:

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

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

$('.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
});​

<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>

$('.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
});​

<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>

html:

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

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

$('.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
});​

<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>

$('.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
});​

<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>

panel1
content1X
小组2
content2X
小组3
内容3x

注：我以前回答过与手风琴相关的问题：

---

在页面加载时，您能否阅读document.location.href.split（“#”）[1]并在匹配元素上使用（）.trigger（'click'）（或者相反，默认情况下，将它们全部折叠并“打开”匹配元素，我认为这是您的意思）。处理您的示例：您希望页面B响应页面a，就像用户从页面a到页面B一样，B页的手风琴显示一张特定的幻灯片，当用户从C页到B页时，B页的手风琴显示一张不同的幻灯片，就像来自a页一样？