小贝子编程

j查询手风琴在响应式调整大小后不起作用



这样做的最终结果是有一个只能在 800px 以下工作的手风琴，任何大于此值的手风琴都会被扩展。截至目前，它在以下情况下有效：

  1. 页面在宽度大于 800px 的窗口中打开(手风琴内容已锁定，不会折叠(

  2. 页面在宽度小于 800px 的窗口中打开(手风琴内容可以使用 On Click 事件自由折叠和展开(

并且在以下情况下不起作用：

  1. 页面在宽度大于 800px 的窗口中打开，调整为小于 800px，然后再次调整大小为大于 800px(可折叠内容可在任何屏幕宽度下使用 On Click 事件自由折叠和展开(

  2. 页面在宽度小于 800px 的窗口中打开，然后调整为大于 800px(手风琴内容可以在任何屏幕宽度下使用 On Click 事件自由折叠和展开(

JS摆弄以测试窗口大小调整

(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() {
});

这不会解除点击操作的绑定，下面的这个片段将完成这项工作(学分(：

$('#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);

演示

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium