这样做的最终结果是使一个手风琴只能在800px以下的分辨率下工作，并且大于它的任何东西都可以扩展。截至目前，它在以下情况下有效：
页面在宽度大于800px的窗口中打开（手风琴内容已锁定，不会折叠）
该页面在宽度小于800px的窗口中打开（手风琴内容可随on click事件自由折叠和展开）
在以下情况下将无法使用：
在宽度大于800px的窗口中打开页面，将其调整为小于800px，然后再次调整为大于800px（手风琴内容可以随任何屏幕宽度的on click事件自由折叠和扩展）
在宽度小于800px的窗口中打开页面，然后将其调整为大于800px的大小（手风琴内容可以随任何屏幕宽度的on click事件自由折叠和展开）
js fiddle to test window resizing
(function($) {
"use strict";
function accordion(match) {
if (match.matches) {
console.log("more than 800");
$('.accordion-toggle').slideDown(600);
$('#services, #accordion').find('.accordion-toggle').on('click', function() {
});
} else {
console.log("less than 800");
$(".accordion-content").not($('.accordion-toggle').next()).slideUp(600);
$('#services, #accordion').find('.accordion-toggle').on('click', function() {
//Expand or collapse this panel
$(this).next().slideToggle(500);
//Hide the other panels
$(".accordion-content").not($(this).next()).slideUp(500);
$(this).off(event);
});
}
}
var match = window.matchMedia("(min-width: 800px)");
accordion(match); // Call listener function at run time
match.addListener(accordion); // Attach listener function on state changes
})(jQuery);.accordion-container {
margin: auto;
max-width: 600px;
}
.accordion-container .accordion-toggle {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
cursor: pointer;
padding-top: 20px;
padding-bottom: 20px;
margin-left: 10vw;
margin-right: 10vw;
font-size: 1.5em;
font-weight: 900;
color: #31353D;
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
border-bottom: solid;
border-width: 1px;
border-color: rgba(0, 0, 0, 0.05);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
font-family: "Martel Sans", sans-serif;
}
.accordion-container .accordion-toggle div {
vertical-align: middle;
}
.accordion-container .accordion-toggle:hover {
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.5);
color: #1C1D21;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-webkit-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
}
.accordion-container .accordion-toggle:hover .accordion-icon {
color: #1C1D21;
-webkit-filter: brightness(150%);
filter: brightness(150%);
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.accordion-container .accordion-content {
display: none;
}
.accordion-container .accordion-content.default {
display: block;
color: #31353D;
}
.accordion-container .accordion-content.default .service-list {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 40px;
margin-bottom: 50px;
margin-left: 10vw;
margin-right: 10vw;
-webkit-box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
font-family: "Martel Sans", sans-serif;
}
.accordion-container .accordion-content.default .service-list .service-list-item {
padding: 5px;
font-size: 1.2em;
color: #445878;
}
.accordion-container .accordion-content.default .service-list .service-list-item span {
vertical-align: middle;
padding: 2px;
}
.accordion-container .accordion-content.default .service-details {
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10vw;
margin-right: 10vw;
color: #31353D;
text-align: left;
line-height: 1.2;
font-size: 1.1em;
}
.accordion-container .accordion-icon {
color: #31353D;
display: block;
font-size: 1.4em;
vertical-align: middle;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.2);
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.about-container {
margin-bottom: 20px;
padding-top: 40px;
padding-bottom: 40px;
}
.about-container .accordion-container .accordion-content.default {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-left: 10vw;
margin-right: 10vw;
font-weight: normal;
line-height: 1.4;
}
.about-container .accordion-container .accordion-content.default .accordion-content-header {
font-size: 1.6em;
line-height: 1.1;
font-weight: bold;
text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.1);
}
.about-container .accordion-container .accordion-content.default .accordion-content-subheader {
font-weight: bold;
font-size: 1.2em;
color: #1C1D21;
line-height: 1.1;
padding-top: 5px;
padding-bottom: 5px;
}
.jqueryHelper {
float: left;
}
@media only screen and (min-width: 800px) {
.jqueryHelper {
float: none;
}
.accordion-container {
margin: auto;
max-width: 750px;
}
.accordion-container .accordion-toggle {
margin-left: 10px;
margin-right: 10px;
font-size: 1.9em;
}
.accordion-container .accordion-content {
display: inline;
}
.accordion-container .accordion-content.default {
align-items: center;
font-size: 1.2em;
color: #31353D;
}
.services-container .accordion-container .accordion-content.default {
display: flex;
}
.about-continer .accordion-container .accordion-content.default {
display: block;
}
.accordion-container .accordion-content.default .service-list {
background-color: #fff;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-top: 40px;
margin-bottom: 50px;
margin-left: 0px;
margin-right: 0px;
width: 40%;
-webkit-box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
box-shadow: 10px 10px 100px 10px rgba(0, 0, 0, 0.2);
flex-grow: 1;
}
.accordion-container .accordion-content.default .service-list .service-list-item small:hover {
transform: scale(1.05);
-webkit-text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
}
.accordion-container .accordion-content.default .service-details {
width: 60%;
padding: 40px;
margin-left: 0px;
margin-right: 0px;
color: #31353D;
text-align: left;
line-height: 1.6;
font-size: 1.1em;
}
.about-container .accordion-container .accordion-content.default {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
margin-left: 80px;
margin-right: 80px;
font-weight: normal;
line-height: 1.4;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="about-container" id="about">
<div id="accordion">
<div class="accordion-container">
<div class="accordion-toggle ">
<div>1</div>
</div>
<div class="accordion-content default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu urna, finibus in nunc quis, porta rhoncus nunc. Sed pretium nunc a lobortis tempor. Morbi sit amet ipsum ut nunc rhoncus cursus sit amet sed nunc. Suspendisse in arcu vel enim tristique
bibendum eu at erat. Sed id urna tincidunt, iaculis lacus nec, feugiat purus. Sed leo odio, fermentum a ipsum eu, faucibus facilisis tortor. Nam dignissim erat magna, at euismod risus imperdiet in. Mauris aliquam enim eget eros euismod, in sollicitudin
turpis ultricies. Sed tincidunt maximus diam ut tincidunt. Cras eros ex, fringilla ac mattis ac, pellentesque eget neque. Nulla sed libero nibh. Proin ex metus, varius congue eros quis, volutpat lacinia mi. Pellentesque eu gravida eros. In hac
habitasse platea dictumst. Fusce dictum sit amet felis fringilla laoreet. Sed ut lorem sed urna pharetra dictum id lobortis ex.
</div>
</div>
<div class="accordion-container">
<div class="accordion-toggle">
<div>2</div>
</div>
<div class="accordion-content default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu urna, finibus in nunc quis, porta rhoncus nunc. Sed pretium nunc a lobortis tempor. Morbi sit amet ipsum ut nunc rhoncus cursus sit amet sed nunc. Suspendisse in arcu vel enim tristique
bibendum eu at erat. Sed id urna tincidunt, iaculis lacus nec, feugiat purus. Sed leo odio, fermentum a ipsum eu, faucibus facilisis tortor. Nam dignissim erat magna, at euismod risus imperdiet in. Mauris aliquam enim eget eros euismod, in sollicitudin
turpis ultricies. Sed tincidunt maximus diam ut tincidunt. Cras eros ex, fringilla ac mattis ac, pellentesque eget neque. Nulla sed libero nibh. Proin ex metus, varius congue eros quis, volutpat lacinia mi. Pellentesque eu gravida eros. In hac
habitasse platea dictumst. Fusce dictum sit amet felis fringilla laoreet. Sed ut lorem sed urna pharetra dictum id lobortis ex.
</div>
</div>
<div class="accordion-container">
<div class="accordion-toggle" style="border: none">
<div>3</div>
</div>
<div class="accordion-content default">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus arcu urna, finibus in nunc quis, porta rhoncus nunc. Sed pretium nunc a lobortis tempor. Morbi sit amet ipsum ut nunc rhoncus cursus sit amet sed nunc. Suspendisse in arcu vel enim tristique
bibendum eu at erat. Sed id urna tincidunt, iaculis lacus nec, feugiat purus. Sed leo odio, fermentum a ipsum eu, faucibus facilisis tortor. Nam dignissim erat magna, at euismod risus imperdiet in. Mauris aliquam enim eget eros euismod, in sollicitudin
turpis ultricies. Sed tincidunt maximus diam ut tincidunt. Cras eros ex, fringilla ac mattis ac, pellentesque eget neque. Nulla sed libero nibh. Proin ex metus, varius congue eros quis, volutpat lacinia mi. Pellentesque eu gravida eros. In hac
habitasse platea dictumst. Fusce dictum sit amet felis fringilla laoreet. Sed ut lorem sed urna pharetra dictum id lobortis ex.
</div>
</div>
</div>
</section>同样，如果在移动时多次单击该切换开关，它会堆积起来，直到完成所有动画后才会停止。
有没有办法阻止它在活动时接受onclick事件？
最佳答案
我不了解您的测试用例的100％，但我发现这里有一个错误：
$('#services, #accordion').find('.accordion-toggle').on('click', function() {
});
这不会取消点击操作的绑定，下面的代码段将完成此工作（credits）：
$('#services, #accordion').find('.accordion-toggle').prop('onclick',null).off('click');
为了打开所有内容，您必须添加：
if (match.matches) {
console.log("more than 800");
//comment this one, it's useless
//$('.accordion-toggle').slideDown(600);
// this one will open all the contents
$(".accordion-content").slideDown(600);
Demo
关于javascript - 响应式调整大小后，jQuery Accordion 无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51044092/