javascript - jQuery 中的一个简单字典列表

Question

我需要一些帮助。我是 jQuery 的菜鸟，我尝试创建一个字典列表。

但我的问题是每个定义都必须显示在他自己的 3 个词(桌面)行、2 个词(平板电脑)和他自己的词( Accordion 系统)下。一次必须显示一个定义。我想在单击某个词时切换定义。

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 个单词下显示每个定义。我可以帮忙吗？提前谢谢你。

桌面版

手机版

Answer 1

您可以使用媒体查询，媒体查询会根据屏幕宽度等条件更改 CSS 规则。

例如，以下宽度规则不适用于宽度超过480px的屏幕:

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

下面的宽度规则不适用于宽度超过769px的屏幕:

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

您可以根据需要拥有任意数量的媒体查询。

有关媒体查询的更多信息，请参阅 this w3schools page