Chiusura automatica Pannello fisarmonica Bootstrap quando si passa alle dimensioni dello schermo mobile

Question

Utilizzo di Bootstrap 2.3.2 Ho una fisarmonica con un pannello singolo che viene aperto quando la pagina viene caricata.

  <div class="accordion" id="refine"> 
       <div class="accordion-heading"> 
       <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
        Title 
       </a> 
       </div> 
       <div id="refine-search" class="accordion-body collapse in"> 
       <div class="accordion-inner"> 
        Test text.... 
       </div> 
       </div> 
      </div>      

Il sito è completamente reattivo. Quando si passa a una dimensione dello schermo del dispositivo mobile [@media (larghezza massima: 979 px)] voglio che il pannello per fisarmonica si chiuda automaticamente, cioè voglio che la linea di ricerca perfeziona div diventi "crollare".

In modalità mobile, la fisarmonica deve ancora funzionare, ad es. l'utente può fare clic sull'intestazione della fisarmonica e il pannello si espande quindi non voglio duplicati div per spegnere il pannello utilizzando. classi di utilità desktop nascoste ecc.

Ho cercato in alto e in basso per una risposta - può qualcuno ti aiuta?

Answer 1

Quindi alla fine ho capito come farlo, pubblicandolo nel caso fosse di aiuto a chiunque.

Alter il codice HTML a:

<div class="accordion" id="refine"> 

    <div class="hidden-phone"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
       <legend> 
        <h2>Refine your search</h2></legend> 
      </a> 
     </div> 
    </div> 

    <div class="visible-phone"> 
     <div class="accordion-heading"> 
      <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
       <legend> 
        <h2>Refine your search (press to reveal)</h2></legend> 
      </a> 
     </div> 
    </div> 

    <div id="refine-search" class="accordion-body collapse in"> 

     <div class="accordion-inner"> 

      Test text.... 
     </div> 

    </div> 

</div> 

e quindi utilizzare questa JS nel file.

$(window).bind('resize load', function() { 
    if ($(this).width() < 767) { 
     $('#refine-search').removeClass('in'); 
     $('#refine-search').addClass('out'); 
    } else { 
     $('#refine-search').removeClass('out'); 
     $('#refine-search').addClass('in'); 
    } 
}); 

Answer 2

Per Bootstrap 3.x questo funzionava benissimo senza modificare il loro codice di esempio:

$(window).bind('resize load', function() { 
    if ($(this).width() < 767) { 
     $('.collapse').removeClass('in'); 
     $('.collapse').addClass('out'); 
    } else { 
     $('.collapse').removeClass('out'); 
     $('.collapse').addClass('in'); 
    } 
}); 

Answer 3

Per chi si imbatte in questa discussione: A partire dal 2/17/17, quando mi sono imbattuto questo thread, entrambi i pannelli della fisarmonica sono stati visualizzati su Desktop e Mobile. Le classi "hidden-phone" e "visible-phone" non venivano mostrate/nascoste a seconda della dimensione del viewport. Ho aggiunto "hidden-xs" e "visible-xs" ai div corrispondenti che avvolgono i titoli delle fisarmoniche e credo che ora funzioni come era inteso per 3 anni fa.

Come spiegato da rtpHarry, non è necessario aggiungere e rimuovere la classe "out", quindi l'ho rimossa. Oltre a questo, non ho apportato ulteriori modifiche.

$(window).bind('resize load', function() { 
 
    if ($(this).width() <= 767) { 
 
    $('#refine-search').removeClass('in'); 
 
    } else { 
 
    $('#refine-search').addClass('in'); 
 
    } 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="accordion" id="refine"> 
 
    <div class="hidden-phone hidden-xs"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
 
     <legend> 
 
      <h2>Desktop: Refine your search</h2> 
 
     </legend> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div class="visible-phone visible-xs"> 
 
    <div class="accordion-heading"> 
 
     <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search"> 
 
     <legend> 
 
      <h2>Mobile: Refine your search (press to reveal)</h2> 
 
     </legend> 
 
     </a> 
 
    </div> 
 
    </div> 
 

 
    <div id="refine-search" class="accordion-body collapse in"> 
 
    <div class="accordion-inner"> 
 
     Test text.... 
 
    </div> 
 
    </div> 
 
</div>

Il mio esempio: http://www.bootply.com/ZAahtL5zGp