Platz Sub-Div in New Elternteil für Mobile/Schmale Breite, 3-Col Bootstrap Ansonsten

Question

JSFiddle: https://jsfiddle.net/Lukeu3f8/4/

Ich habe ein 3-Säulen-Bootstrap-Layout. Wenn Sie etwas in Spalte 1 auswählen, wird 2 aktiviert, 2 aktiviert 3 (wie ein Schritt-für-Schritt-Assistent).

Das Problem ist , wenn die Größe des Browsers geändert wird (und in Mobile) Spalten 2 und 3 umspalten Spalte 1 am Ende. Sie können dies sehen, wenn Sie die Größe des JSFiddle-Fensters ändern.

Wenn die Seite geöffnet wird, ist dies zunächst kein Problem, da keine Auswahl getroffen wurde. Es ist in Ordnung, 1,2,3 nacheinander in einer einzigen Spalte anzuzeigen. Aber sobald ein Col 1 Menü ausgewählt ist, in Mobile (oder Desktop, wenn $(window).width() < 1000 meiner Erfahrung nach) Col 2 und später Col 3 muss unter dem MenuItem LI (vorne), die geklickt wurde, getrennt/vorangestellt werden. Ich denke auch, dass ich zum aktiven LI scrollen muss, aber das kann später kommen. Alle anderen Szenarien sind in Ordnung, wir können das 3-Farben-Layout so beibehalten, wie es ist.

Ich brauche wohl eine Funktion sowohl beim Start und Redimensionierung, der etwas tut, wie

function resizeSec2And3() { 

     var limit = 1000; 
     // Only perform the detachment if (1) window width < limit, (2) menu selection has been made 
     if ($(window).width() < limit && currmenuitemindex != -1) { 
      var col2element = $('#divCol2').detach(); 
      // Append DIV to the clicked LI 
      // ... 
     } 

    } 

Aber ich bin nicht den Index des geklickt LI bekommen, irgendwelche schnell Gedanken über die Indizierung und wie das Resize-Ereignis anhängen ?

Answer 1

Ich bin nicht den Index des geklickt LI bekommen, werden alle schnell Gedanken über die Indizierung

I Klassen hinzufügen würde (zum Beispiel menu-item-1) oder Datenattribute (z data-index="1") zu den <li> Elemente. Es ist einfach, wenn Sie Ihr Menü mit JS erstellen. (Ansonsten können Sie auch bestehende Listenelemente durchlaufen und das gleiche tun.)

var items = [ 
 
    'Menu item 1', 
 
    'Menu item 2', 
 
    'Menu item 3' 
 
]; 
 

 
$(function(){ 
 
    $.each(items, function(i, e) { 
 
    $('#menu').append('<li data-index="'+i+'">'+e+'</li>'); 
 
    }); 
 
    $('#menu > li').click(function() { 
 
    alert($(this).data('index')); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1>Click on items</h1> 
 
<ul id="menu"></ul>

und wie das Resize-Ereignis befestigen?

Sie können attach event handler for the onResize Ereignis durch eine Funktion window.onresize Zuordnung oder durch window.addEventListener("resize", myFunction) aufrufen. Zum Beispiel:

window.onresize = function(event) { 
 
    if (window.innerWidth < 1000) { 
 
    $('#mode').text('mobile'); 
 
    } else { 
 
    $('#mode').text('desktop'); 
 
    } 
 
}; 
 
window.onresize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<h1 id="mode"></h1>

Und Sie können hinzufügen/entfernen Klassen zu/von Ihren Listen abhängig von der aktuellen Bildschirmbreite.

Ich würde auch versuchen, Bootstrap magische Klassen wie hidden-BREAKPOINT und visible-BREAKPOINT zu verwenden, auf diese Weise wird das Größenänderungsereignis möglicherweise nicht benötigt. Siehe unten stehende Beispiel, wo gibt es eine verschachtelte Liste auf kleineren Bildschirmen und zwei Listen auf größere:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-6"> 
 
     <h1>Menu 1</h1> 
 
     <ul> 
 
     <li>Item 1/1 
 
      <ul class="hidden-md hidden-lg"> 
 
      <li>Item 2/1</li> 
 
      <li>Item 2/2</li> 
 
      </ul> 
 
     </li> 
 
     <li>Item 1/2</li> 
 
     </ul> 
 
    </div> 
 
    <div class="col-md-6 hidden-xs hidden-sm"> 
 
     <h1>Menu 2</h1> 
 
     <ul> 
 
     <li>Item 2/1</li> 
 
     <li>Item 2/2</li> 
 
     </ul> 
 
    </div> 
 
    </div> 
 
</div>

Hoffe, dass ich helfen konnte.