javascript - 响应调整大小后 jQuery Accordion 不起作用

Question

这样做的最终结果是 Accordion 只能在 800 像素以下工作，任何大于 800 像素的都会被展开。截至目前，它在以下情况下有效:

1. 页面在宽度大于800px的窗口中打开( Accordion 内容被锁定，不会折叠)

2. 页面在宽度小于 800px 的窗口中打开( Accordion 内容可随点击事件自由折叠和展开)

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

1. 页面在宽度大于 800 像素的窗口中打开，调整为小于 800 像素，然后再次调整为大于 800 像素( Accordion 内容可以通过任何屏幕上的点击事件自由折叠和展开宽度)

2. 页面在宽度小于 800px 的窗口中打开，然后调整为大于 800px( Accordion 内容可以在任何屏幕宽度上通过点击事件自由折叠和展开)

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 事件？

Answer 1

我还没有 100% 理解你的测试用例，但我在这里发现了一个错误:

$('#services, #accordion').find('.accordion-toggle').on('click', function() {

  });

这不会取消绑定(bind)点击操作，下面的代码片段将完成这项工作(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