Wie kann ich mit CSS und JavaScript eine ungeordnete Liste in zwei Spalten anzeigen?

Anzeigen einer ungeordneten Liste in zwei Spalten

Einführung

Für moderne Browser besteht der primäre Ansatz zur Anzeige einer ungeordneten Liste in zwei Spalten in der Verwendung von CSS3-Spaltenmodul. Für ältere Browser wie Internet Explorer ist jedoch eine JavaScript-basierte Lösung erforderlich.

Moderne Browser

Mit dem CSS3-Spaltenmodul können Sie einfach die folgenden CSS-Regeln hinzufügen, um das gewünschte Ergebnis zu erzielen Wirkung:

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
}

Legacy-Browser

Für Legacy-Browser können Sie eine JavaScript-Lösung verwenden, die DOM-Manipulation beinhaltet. Hier ist ein JavaScript-Codebeispiel mit jQuery:

$(function(){
    var initialContainer = $('.columns'),
        columnItems = $('.columns li'),
        columns = null,
        column = 1;

    function updateColumns(){
        column = 0;
        columnItems.each(function(idx, el){
            if (idx > (columnItems.length / columns.length) + (column * idx)){
                column += 1;
            }
            $(columns.get(column)).append(el);
        });
    }

    function setupColumns(){
        columnItems.detach();
        while (column++ < initialContainer.data('columns')){
            initialContainer.clone().insertBefore(initialContainer);
            column++;
        }
        columns = $('.columns');
    }

    setupColumns();
    updateColumns();
});

Und hier ist das entsprechende CSS:

.columns{
    float: left;
    position: relative;
    margin-right: 20px;
}

Variantenanzeigeoption

Der oben bereitgestellte Code führt zu der folgenden Spalte Anordnung:

A  E
B  F
C  G
D

Um das vom Kunden gewünschte Variantenlayout zu erreichen OP:

A  B
C  D
E  F
G

Ändern Sie die Funktion updateColumns() wie folgt:

function updateColumns(){
    column = 0;
    columnItems.each(function(idx, el){
        if (column > columns.length){
            column = 0;
        }
        $(columns.get(column)).append(el);
        column += 1;
    });
}

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS und JavaScript eine ungeordnete Liste in zwei Spalten anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!