[英]Accordion jQuery - Open section from external link
我有一個手風琴菜單,我不知道如何鏈接。 菜單本身工作正常。
當我單擊下面的鏈接時,應該打開我的第一個手風琴菜單
<a href="case_studies.html#case1">Case study 1</a>
手風琴的JavaScript
<script type="text/javascript">
$(document).ready(function(){
$("a#show-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeIn(300);
})
$("a#close-panel").click(function(){
$("#lightbox, #lightbox-panel").fadeOut(300);
})
})
</script>
<script type="text/javascript">
$(function(){
$("#accordion-header").accordion({ navigation: true });
});
</script>
Accordion.js文件
$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });
/* //Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content'); */
// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
手風琴的主體代碼為
<div id="accordion-container">
<p class="accordion-header" style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"><span style="padding-left:10px; color:#009edb; padding-top:10px; line-height:25px;"><a href="#case1">Case study 1</a></span></p>
<div class="accordion-content">
<div class="textInner">
TEST TEXT THAT FALLS UNDER THE MENU
</div>
</div>
<p class="accordion-header" style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"><span style="padding-left:10px; color:#009edb; padding-top:10px; line-height:25px;"><a href="#case2">Case study 2</a></span></p>
<div class="accordion-content">
<div class="textInner">
TEST TEXT THAT FALLS UNDER THE MENU
</div>
</div>
</div>
任何幫助表示贊賞。 我的想法在這里用光了。
歡呼和感謝,G
$(function(){
$("#accordion-header").accordion({ navigation: true });
$("[href='#case1']").parent('.accordion-header').click();
});
(我讓您自己了解如何從url獲取哈希值)
編輯:查看您的代碼,在您的手風琴插件中使用哈希更改處理程序事件(而不是單擊事件)也可能更相關。
在這里擺弄! 據您從我的問題中了解,這是可行的。
<li class="dropdown">
<a id="drop4" role="button" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="drop4">
<li role="presentation"><a class= "opener" data-panel="0" role="menuitem" tabindex="-1" href="#">Bank</a></li>
<li role="presentation"><a role="menuitem"class= "opener" data-panel="1" tabindex="-1" href="#">Cash</a></li>
<li role="presentation"><a role="menuitem" class= "opener" data-panel="2" tabindex="-1" href="#">Property</a></li>
</ul>
</li>
<div id="Accordion">
<h3>Section 1</h3>
<div>
<p></p>
</div>
<h3>Section 2</h3>
<div>
<p></p>
</div>
<h3>Section 3</h3>
<div>
<p></p>
</div>
<h3>Section 4</h3>
<div>
<p>One</p>
<p>Two</p>
</div>
它的javascript是:
var $accordion = $("#Accordion");
$accordion.accordion();
$(".opener").on("click", function () {
var $this = $(this),
toOpen = $this.data("panel");
$accordion.accordion("option", "active", toOpen);
return false;
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.