Deaktivieren Sie die Umschaltoption in Bootstrap 3 reduzieren Akkordeon auf große Auflösungen

Kann die Umschaltfunktion bei Bootstrap-Komprimierung Akkordeon nur bei größeren Auflösungen deaktiviert werden?Deaktivieren Sie die Umschaltoption in Bootstrap 3 reduzieren Akkordeon auf große Auflösungen

Ziel ist es, das Akkordeon bei kleinen Auflösungen mit der Option zum Umschalten zwischen Zuständen zu reduzieren, und bei großen Auflösungen ohne Möglichkeit zum Umschalten zwischen Zuständen. Was wäre der beste Weg, die eingebaute Bootstrap-Funktionalität zu nutzen, um dies zu erreichen?

Ich habe eine Fiddle-Demo gemacht mit dem, was ich jetzt habe. Ich bin nicht gut mit JS.

JSFiddle DEMO: http://jsfiddle.net/1crojp98/1/

HTML:

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 

    <div class="panel panel-default col-sm-6"> 
     <div class="panel-heading" role="tab" id="headingOne"> 
      <h4 class="panel-title text-center"> 
      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Panel 1 
      </a> 
      </h4> 
     </div> 
     <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
      <div class="panel-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p> 
      </div> 
     </div> 
    </div> 

    <div class="panel panel-default col-sm-6"> 
     <div class="panel-heading" role="tab" id="headingTwo"> 
      <h4 class="panel-title text-center"> 
       <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
        Panel 2 
       </a> 
      </h4> 
     </div> 
     <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> 
      <div class="panel-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tristique laoreet dui, id porttitor ipsum convallis vel. Integer turpis nisl, rhoncus sed hendrerit sit amet, adipiscing nec eros. Suspendisse potenti. Nam quis risus libero. Vestibulum et diam nisl, eget feugiat leo.</p> 
      </div> 
     </div> 
    </div> 

</div>

JavaScript:

$(document).ready(function(){ 
    if ($(window).width() <= 768){ 
    $('.panel-collapse').removeClass('in'); 
    } 
}); 

$(window).resize(function(){ 
    if ($(window).width() >= 768){ 
    $('.panel-collapse').addClass('in'); 
    } 
    if ($(window).width() <= 768){ 
    $('.panel-collapse').removeClass('in'); 
    } 
});

Quelle

2015-01-23 imag

Hat meine Antwort das Problem lösen? –

Ich habe die Geige mit etwas Inhalt unter dem Akkordeon aktualisiert und Sie können den Sprung auf große Auflösungen sehen, wenn Sie auf den Link klicken, kann es vermieden werden. http://jsfiddle.net/1crojp98/3/ – imag

Danke, es funktioniert großartig. Freundliche Grüße! – imag

das möglich ist. Sie sollten nur das Ereignis Click der Ausbreitung stoppen:

$('a[data-toggle="collapse"]').click(function(e){ 
    if ($(window).width() >= 768) { 
    e.stopPropagation(); 
    }  
});

ich Ihren Code auf jsFiddle http://jsfiddle.net/1crojp98/2/

aktualisiert haben aber dieser Code wird die Möglichkeit für beide Zusammenbruch und offene Panels (nur für größere Auflösungen deaktivieren, aber trotzdem).

Quelle

2015-01-23 11:24:09

Danke, bei großer Auflösung, wenn ich auf den Link klicke, scrollt die Seite runter, kann das vermieden werden? – imag

Ja, sicher. Sie sollten nur das Standardverhalten dieses Ereignisses verhindern (ich habe jsFiddle http://jsfiddle.net/1crojp98/4/ aktualisiert). –

Großartig, das hat den Trick gemacht. Danke für deine Hilfe Alex. – imag

Sie können den Link in den größeren Auflösungen einfach ausblenden und stattdessen einen leeren Titel anzeigen, z. innerhalb der Panel-Überschrift:

<h4 class="panel-title text-center"> 
    <a class="hidden-sm hidden-md hidden-lg" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
    Panel 1 
    </a> 
    <div class="hidden-xs"> 
    Panel 1 
    </div> 
</h4>

Quelle

2016-02-27 18:06:11 Rolleric

Schöne Workaround! –

Deaktivieren Sie die Umschaltoption in Bootstrap 3 reduzieren Akkordeon auf große Auflösungen

Antwort

Verwandte Themen