Question

我对解决以下问题的正确方法感到困惑：

其中包含图片，标题，标签和图标的列表
两个应该切换列表显示的按钮
使用Bootstrap和jQuery

例如：

<div class="display__list">
  <div class="col-12">
    <div class="row">
     <div class="col-2">Image 1</div>
     <div class="col-6">Title 2</div>
     <div class="col-4">Icons 3</div>
    </div>
  </div>
  <div class="col-12">
    <div class="row">
      <div class="col-2">Image 2</div>
      <div class="col-6">Title 2</div>
      <div class="col-4">Icons 2</div>
    </div>
 </div>
 <div class="col-12">
  <div class="row">
    <div class="col-2">Image 3</div>
    <div class="col-6">Title 3</div>
    <div class="col-4">Icons 3</div>
  </div>
 </div>

<div class="display__tile">
  <div class="col-4">
    <div class="row">
      <div class="col-12">Title 1</div>
      <div class="col-6">Image 1</div>
      <div class="col-6">Icons 1</div>
   </div>
 </div>
 <div class="col-4">
   <div class="row">
     <div class="col-12">Title 2</div>
     <div class="col-6">Image 2</div>
     <div class="col-6">Icons 2</div>
   </div>
 </div>
 <div class="col-4">
   <div class="row">
     <div class="col-12">Title 3</div>
     <div class="col-6">Image 3</div>
     <div class="col-6">Icons 3</div>
    </div>
  </div>
</div>

到目前为止，我的方法是：

一个中央班级的变化将影响孩子的风格。
使用data--class--tile和data--class--list属性以及类名。
定义两个标记列表并显示/隐藏相关内容。

只有第三种方法可以解决加价顺序问题。我想避免重复的标记，而是希望使用一个行为像需要的列表。任何进一步的帮助-确认将很有帮助。预先谢谢你！

列表显示模式-列表和图块

0 个答案: