Eine einfache Wörterbuchliste in jQuery

Question

Ich brauche etwas Hilfe bitte. Ich bin noob in jQuery und ich versuche, eine Wörterbuchliste zu erstellen.

Aber mein Problem ist, dass jede Definition muss unter seiner eigenen Reihe von 3 Worten (Desktop), 2 Wörter (in Tablet) und unter seinem eigenen Wort (Akkordeon-System) in Mobile angezeigt werden. Eine Definition muss gleichzeitig angezeigt werden. Ich möchte die Definition umschalten, wenn ich auf ein Wort klicke.

Wordpress wird verwendet, um Wörter hinzuzufügen, damit die Liste dynamisch sein muss.

Hier mein unvollständiger Test: https://jsfiddle.net/Xroad/qbh79xoy/31/

$('.tabs .tab-link').each(function (index, item) { 
    $(item).attr('data-link', index); 
}); 

$('.tab-content .tab-content').each(function (index, item) { 
    $(item).attr('data-content', index); 
}); 

$('.tabs .tab-link').click(function() { 
    $('.tabs .tab-link').not(this).removeClass('current');  
    $(this).toggleClass('current'); 
}); 

Ich weiß nicht, was ich schreibt, muss jede Definition unter einer Reihe von 3 Worten angezeigt werden soll. Kann ich bitte etwas Hilfe haben? Vielen Dank im Voraus.

Auftischversion

MOBILE VERSION

Answer 1

Sie Medienanfragen verwenden können, CSS-Regeln Medienabfragen ändern auf Kriterien wie Bildschirmbreite abhängig.

Zum Beispiel die folgende Breite Regel breiter für Bildschirme gelten nicht als 480px:

@media screen and (max-width: 480px) { 
    body { 
    width: 100%; 
    } 
} 

Und die folgende Breite Regel wird für Bildschirme breiter als 769px nicht gelten:

@media screen and (max-width: 769px) { 
    body { 
    width: 33%; 
    } 
} 

Sie können so viele Medienanfragen haben, wie Sie benötigen.

Für weitere Informationen über Medienanfragen sehen this w3schools page