【发布时间】：2016-08-01 11:55:01
【问题描述】：
我正在使用带有折叠/隐藏所有选项的 jQuery 手风琴，该选项仅适用于一个实例。一旦第二个（甚至更多）实例被放入，脚本就会切换所有手风琴上的所有面板，因为它不“知道”它应该区分不同的手风琴进行切换。有没有一种简单的方法可以让脚本识别正在使用切换按钮的手风琴？可能通过临时 ID？
HTML
<h2>First accordion</h2>
<div class="accordion">
<a class="toggle_open" id="button_toggle">Toggle all</a>
<h5>Which is the first question?</h5>
<div class="accordion_text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
</div>
<h5>What is the second question?</h5>
<div class="accordion_text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
</div>
<h5>And the third?</h5>
<div class="accordion_text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
</div>
</div>
<h2>Second accordion</h2>
<div class="accordion">
<a class="toggle_open" id="button_toggle">Toggle all</a>
<h5>Which is another question?</h5>
<div class="accordion_text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
</div>
<h5>What is the next-to-another question?</h5>
<div class="accordion_text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
</div>
<h5>Tell me about the last!</h5>
<div class="accordion_text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci natus quas quod doloremque, dolore aliquid, blanditiis eligendi nemo cum tenetur earum. Suscipit ea enim consequuntur vero totam, impedit veritatis.</p>
</div>
</div>
CSS
.accordion {
.accordion_text {
display: none;
}
}
JS
jQuery('document').ready(function(){
/* Accordion for pages */
var headers = jQuery('.accordion h5');
var contentAreas = jQuery('.accordion_text').hide();
var expandLink = jQuery('.toggle_open');
// add the accordion functionality
headers.click(function() {
var panel = jQuery(this).next();
var isOpen = panel.is(':visible');
// open or close as necessary
panel[isOpen? 'slideUp': 'slideDown']()
// trigger the correct custom event
.trigger(isOpen? 'hide': 'show');
// stop the link from causing a pagescroll
return false;
});
// hook up the expand/collapse all
expandLink.click(function(){
var isAllOpen = jQuery(this).data('isAllOpen');
contentAreas[isAllOpen? 'hide': 'show']()
.trigger(isAllOpen? 'hide': 'show');
});
// when panels open or close, check to see if they're all open
contentAreas.on({
// whenever we open a panel, check to see if they're all open
// if all open, swap the button to collapser
show: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(isAllOpen){
expandLink.text('Hide all')
.data('isAllOpen', true);
}
},
// whenever we close a panel, check to see if they're all open
// if not all open, swap the button to expander
hide: function(){
var isAllOpen = !contentAreas.is(':hidden');
if(!isAllOpen){
expandLink.text('Collapse all')
.data('isAllOpen', false);
}
}
});
});
您可以在http://codepen.io/enoversum/pen/EKQmeL 找到此代码示例
【问题讨论】：
标签： javascript jquery accordion