2016-12-29 19 views
1

私は助けてください。私はjQueryのnoobだと私は辞書のリストを作成しようとします。jQueryの簡単な辞書リスト

しかし、私の問題は、3つの単語(デスクトップ)、2つの単語(タブレット)、モバイルの自分の言葉(アコーディオンシステム)の下にそれぞれの定義を表示する必要があるということです。一度に1つの定義を表示する必要があります。単語をクリックすると定義が切り替わります。

Wordpressは単語を追加してリストを動的にする必要があります。

ここに私の不完全なテスト: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'); 
}); 

私は3つのワードの行の下にそれぞれの定義を表示するように書かなければならないのか分かりません。助けてもらえますか?前もって感謝します。

デスクトップバージョン

enter image description here

モバイル版

enter image description here

+0

参照してください、私はそれはあなたのユースケースに合うとは思いません。 –

+0

@ Ji_in_codingでは、代わりにどのような構造を使用できますか? – Xroad

答えて

2

あなたはメディアクエリを使用することができますが、メディアクエリは、このような画面幅などの基準に応じて、CSSルールを変更します。

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

そして次ルールを769pxより広い画面に対して適用されるわけではない:以下ルールが480PXより広い画面に対して適用されるわけではない例えば

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

必要なだけ多くのメディアクエリを設定できます。

メディアクエリについての詳細情報は、あなたのHTML構造を見てthis w3schools page

+0

実際、私の問題は応答性のある処理を行う方法ではありません。しかし、3行の各行の下に定義を表示する。 – Xroad

関連する問題