![](/img/trans.png)
[英]Jquery Accordion to activate specific panels with anchor tags/url hash
[英]Jquery Open Accordion based on URL anchor hash
我有一个FAQ手风琴。 每个问题的类名为q,其id为q1或q2或q3。 每个答案都有一个类名。
当url有一个锚标记/ faq#q2时,我希望触发q2。 我有下面的代码,但它不工作。
我认为导致它不起作用的行是:if(hash)$(。q [id $ =“+ hash +”])。trigger('click'); 但我无法弄清楚什么是错的。
$(document).ready(function($) { $(".a").hide().first().show(); $(".q:first").addClass("active"); $('#accordion').find('.q').click(function(){ //Expand or collapse this panel $(this).next().slideToggle('fast'); //Hide the other panels $(".a").not($(this).next()).slideUp('fast'); //Find anchor hash and open var hash = $.trim( window.location.hash ); if (hash) $(.q[id$="+hash+"]).trigger('click'); }); });
.q {cursor: pointer;} .a {display: none;} .q.active + .accordion-content { display: block; }
<div id="accordion"> <h4 class="q" id="q1">Accordion 1</h4> <div class="a"> <p>Cras malesuada ultrices augue <a href="#q2" onclick="setTimeout('history.go(0);',800);">Open Accordion 2</a> molestie risus.</p> </div> <h4 class="q" id="q2">Accordion 2</h4> <div class="a"> <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> </div> <h4 class="q" id="q3">Accordion 3</h4> <div class="a"> <p>Vivamus facilisisnibh scelerisque laoreet.</p> </div> </div>
首先 - 你的jQuery选择器丢失了单引号或双引号。 如果我理解正确 - 你想要这样的东西?
if (hash) {
var element = $(hash);
if (element.length) {
element.trigger('click');
}
}
更新( http://jsfiddle.net/6hzby0aa/ ):
// Hide all panels $(".a").hide(); // Show first panel by default $(".q:eq(0)").next(".a").show(); // Get hash from query string. You can put there "#q1", "#q2" or something else for test var hash = window.location.hash; if (hash) { // Get panel header element var requestedPanel = $(hash); if (requestedPanel.length) { // Hide all panels $(".a").hide(); // Show requested panel requestedPanel.next(".a").show(); } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordion"> <h4 class="q" id="q1">Accordion 1</h4> <div class="a"> <p>Cras malesuada ultrices augue <a href="#q2" onclick="setTimeout('history.go(0);',800);">Open Accordion 2</a> molestie risus.</p> </div> <h4 class="q" id="q2">Accordion 2</h4> <div class="a"> <p>Lorem ipsum dolor sit amet mauris eu turpis.</p> </div> <h4 class="q" id="q3">Accordion 3</h4> <div class="a"> <p>Vivamus facilisisnibh scelerisque laoreet.</p> </div> </div>
这是我最后的代码。 感谢@Andrew Orlov
<script type="text/javascript">
$(document).ready(function($) {
// Hide all panels
$(".a").hide();
// Show first panel by default
$(".q:eq(0)").next(".a").show();
$(".q:first").addClass("active");
// Get hash from query string
var hash = window.location.hash;
if (hash) {
// Get panel header element
var requestedPanel = $(hash);
if (requestedPanel.length) {
// Hide all panels
$(".a").hide();
$('.q').removeClass("active"); // remove active
// Show requested panel
requestedPanel.next(".a").show();
requestedPanel.addClass("active"); //add active
}
};
$('body').find('.q').click(function() {
//Expand or collapse this panel
$(this).next().slideToggle('600');
$('.q').removeClass("active"); // remove active
$(this).addClass("active"); // add active
//Hide the other panels
$(".a").not($(this).next()).slideUp('fast');
});
});
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.