特定の画面サイズでブートストラップパネルクラスを削除する

Question

ブートストラップアコーディオン機能を持つセクションで作業しています。 3つの製品カテゴリの下に表示される3つのアコーディオンがあります。画面サイズが767pxの幅になると、3つの商品カテゴリが重ねて表示されます。この時点で、私はそれぞれのアコーデオンが対応するカテゴリの直下に現れるようにします。

私は仕事に近いものを持っています。 jQueryの

<div class="container panel panel-default"> 
     <div class="intro"></div> 
     <div class="row people prods"> 
      <div class="col-md-4 col-sm-4 item aos-init aos-animate" id="productOneButton" data-aos="fade-up" data-aos-delay="600"> 
       <div class="box"> 
        <img class="img-circle no-circle" src="[img path].jpg" 
         data-bs-hover-animate="pulse"> 

        <h3 class="name2">Product 1</h3> 

        <p class="description2">Product 1 description</p> 
        <button class="btn btn-primary" data-parent="#accordion" data-toggle="collapse" 
          data-target="#product-one" type="button">More Information 
        </button> 
       </div> 
      </div> 

      <div class="col-md-4 col-sm-4 item aos-init aos-animate" id="productTwoButton" data-aos="fade-up" data-aos-delay="750"> 
       <div class="box"> 
        <img class="img-circle no-circle" src="[img path].jpg" 
         data-bs-hover-animate="pulse"> 

        <h3 class="name2">Product Two</h3> 

        <p class="description2">Product 2 description</p> 
        <button class="btn btn-primary" data-parent="#accordion" id="productTwoButton" data-toggle="collapse" 
          data-target="#product-two" type="button">More Information 
        </button> 
       </div> 
      </div> 

      <div class="col-md-4 col-sm-4 item aos-init aos-animate" id="productThreeButton" data-aos="fade-up" data-aos-delay="900"> 
       <div class="box"> 
        <img class="img-circle no-circle" src="[img path].jpg" 
         data-bs-hover-animate="pulse"> 

        <h3 class="name2">Product Three</h3> 

        <p class="description2">Product three description</p> 
        <button class="btn btn-primary" data-parent="#accordion" data-toggle="collapse" 
          data-target="#product-three" type="button">More Information 
        </button> 
       </div> 
      </div> 
     </div> 


     <div class="products-accordion panel-collapse collapse" id="product-one"> 
      <div class="arrow-up"></div> 
      <div class="accordion-container"> 
       <p>Suspendisse potenti. Curabitur nec mollis magna. Donec viverra, felis id scelerisque accumsan, 
        dui velit scelerisque tellus, in blandit nisl ante eu dui. Aliquam sodales libero ac lectus 
        vehicula mollis. Suspendisse viverra diam arcu, non placerat risus pretium sit amet. Vivamus 
        varius, lorem vitae fermentum dignissim, sapien eros tincidunt nisi, quis rhoncus libero tellus 
        vulputate tellus. Nulla non ex id sapien ultricies placerat. Sed consequat felis elementum 
        ullamcorper ultricies.</p> 
      </div> 
     </div> 

     <div class="products-accordion panel-collapse collapse" id="product-two"> 
      <div class="arrow-up"></div> 
      <div class="accordion-container"> 
       <p>Praesent tempor augue lorem, vel elementum ante ornare eget. Donec pharetra, ex ultrices pellentesque 
        imperdiet, dui risus pharetra elit, pulvinar feugiat felis ligula at augue. Sed convallis eget justo 
        sed tincidunt. Morbi lobortis metus quis massa consectetur scelerisque. Duis volutpat suscipit 
        tellus, tincidunt elementum est volutpat nec. Pellentesque eleifend erat lorem, et efficitur neque 
        convallis eu. Aenean aliquam nisi ut metus aliquam faucibus. Mauris at congue ex. Morbi dapibus 
        velit 
        non est laoreet egestas. Nulla turpis neque, interdum in tincidunt vitae, gravida id elit. Nunc 
        felis 
        risus, faucibus ut ipsum eget, dictum placerat ligula. Mauris ultricies diam ut congue 
        scelerisque.</p> 
      </div> 
     </div> 

     <div class="products-accordion panel-collapse collapse" id="product-three"> 
      <div class="arrow-up"></div> 
      <div class="accordion-container"> 
       <p>Phasellus laoreet porttitor augue at placerat. Morbi ac turpis leo. Proin elementum risus augue, sit 
        amet luctus ante porta vel. Vestibulum pharetra felis condimentum, dignissim metus at, fermentum 
        justo. 
        Suspendisse eget mi placerat, mollis nunc id, euismod tortor. Integer quis lacus nec lacus maximus 
        venenatis. Integer sed scelerisque lacus. Nunc bibendum sodales ligula, eu dignissim dolor. Fusce 
        ullamcorper velit quis ex porta blandit. In placerat, lorem eget imperdiet pulvinar, nisi arcu 
        bibendum 
        ipsum, ac porta quam felis sed erat. Vivamus est nulla, vestibulum a sem sed, blandit congue purus. 
        Praesent aliquam, felis et egestas ornare, tortor eros lobortis leo, laoreet volutpat dui nisl a 
        lectus. 
        Praesent ullamcorper eget enim eu tristique. Cras purus dolor, aliquet at gravida id, placerat ac 
        lectus.</p> 
      </div> 
     </div> 
    </div> 
</div> 

そしてここにある：ここではHTMLがどのように見えるかです

$(document).ready(function() { 
    function checkWidth() { 
     var windowsize = $(window).width() + 16; 

     var product1Container = $('#product-one'); 
     var product2Container = $('#product-two'); 
     var product3Container = $('#product-three'); 

     var productOneButton = $('#productOneButton'); 
     var productTwoButton = $('#productTwoButton'); 
     var productThreeButton = $('#productThreeButton'); 

     var ProductsSection = $('.prods'); 

     if (windowsize <= 767) { 
      productOneButton.append(product1Container); 
      productTwoButton.append(product2Container); 
      productThreeButton.append(product3Container); 

      product1Container.removeClass('in'); 
      product2Container.removeClass('in'); 
      product3Container.removeClass('in'); 
     } 
     else{ 
      product1Container.insertAfter(ProductsSection); 
      product2Container.insertAfter(ProductsSection); 
      product3Container.insertAfter(ProductsSection); 

     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
}); 

問題は、クラスが一つ一つの時間を削除されている「中」の画面のサイズが変更されていることです767pxより小さい幅に設定します。私は767pxになると、 'in'クラスを削除したいだけです。私はメディアのクエリを使って、767pxの各アコーディオンdivにdisplay: noneを設定しようとしましたが、アコーディオンのスライドのアニメーション効果が失われてしまったので、見た目には魅力的ではありません。

アコーディオンのアニメーション効果を損なうことなく、767pxの画面サイズでのみ 'in'クラスを削除するためにjQueryを変更する方法はありますか？

Answer 1

削除が既に完了している場合は、それを追跡するために一時変数を追加できます。

$(document).ready(function() { 
    var temp = 0; 
    function checkWidth() { 
     var windowsize = $(window).width() + 16; 

     var product1Container = $('#product-one'); 
     var product2Container = $('#product-two'); 
     var product3Container = $('#product-three'); 

     var productOneButton = $('#productOneButton'); 
     var productTwoButton = $('#productTwoButton'); 
     var productThreeButton = $('#productThreeButton'); 

     var ProductsSection = $('.prods'); 

     if (windowsize <= 767 && temp == 0) { 
      productOneButton.append(product1Container); 
      productTwoButton.append(product2Container); 
      productThreeButton.append(product3Container); 

      product1Container.removeClass('in'); 
      product2Container.removeClass('in'); 
      product3Container.removeClass('in'); 
      temp ++; 
     } 
     else{ 
      product1Container.insertAfter(ProductsSection); 
      product2Container.insertAfter(ProductsSection); 
      product3Container.insertAfter(ProductsSection); 
      temp = 0; 
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
});