javascript - JS 或 CSS - 广告页面 : how to show only adds of certain category?

Question

我正在尝试做一个广告页面。每个广告都采用卡片/便利贴的格式。我有一个包含类别的顶部菜单，我不想只显示用户点击类别的卡片。

举个例子

codepen - ads page

我必须做什么才能启用此功能？我是否必须给每个类别一个类名，然后输入:

display: block;
or
display: none;

?另外，我可以只用 CSS 来做，还是必须用 Javascript 来做？

拜托，我正在尝试学习 Vanilla Javascript，所以如果没有 jquery 的答案，我将不胜感激 :)

Answer 1

对于纯 css 解决方案，您可以使用单选框来实现水平 Accordion 效果。您可以搜索单选框和 Accordion 。

根据您提供的代码，您可以尝试以下操作

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.category-tab-input {
  display: none;
}

.categories {
  position: relative;
  display: flex;
}

.category-tab-label {
  margin-bottom: 5px;
  margin-right: 5px;
  border: 1px dotted pink;
  padding: 5px 5px;
}

#categories input:checked~.teste {
  display: flex;
}

.teste {
  position: absolute;
  display: none;
  left: 0;
  top: 30px;
}

.card {
  max-height: 100px;
  width: 245px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  font-size: 0.85em;
  line-height: 1.5em;
  margin-right: 15px;
  overflow: hidden;
  border-radius: 5px;
  transition: max-height 3s;
}

<section id="categories">
  <ul class="categories">
    <li>
      <input type="radio" name="category-tab" id="category-tab-1" class="category-tab-input" checked/>
      <label for="category-tab-1" class="category-tab-label">Immob</label>
      <ul class="teste">
        <li class="card">
          <p>Tab 1
            <br> Item 1
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
        <li class="card">
          <p>Tab 1
            <br> Item 2
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
        <li class="card">
          <p>Tab 1
            <br> Item 3
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
        <li class="card">
          <p>Tab 1
            <br> Item 4
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
      </ul>
    </li>

    <li>
      <input type="radio" name="category-tab" id="category-tab-2" class="category-tab-input" />
      <label for="category-tab-2" class="category-tab-label">Rénovation</label>
      <ul class="teste">
        <li class="card">
          <p>Tab 2
            <br> Item 1
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
        <li class="card">
          <p>Tab 2
            <br> Item 2
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
      </ul>
    </li>

    <li>
      <input type="radio" name="category-tab" id="category-tab-3" class="category-tab-input" />
      <label for="category-tab-3" class="category-tab-label">Équilibre</label>
      <ul class="teste">
        <li class="card">
          <p>Tab 3
            <br> Item 1
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
        <li class="card">
          <p>Tab 3
            <br> Item 2
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
        <li class="card">
          <p>Tab 3
            <br> Item 3
            <br>Lorem Ipsum is simply dummy text of the printing
          </p>
        </li>
      </ul>
    </li>
  </ul>
</section>

我不确定每个子类别有多少元素，所以我不均匀地添加了我的以向您展示布局。根据您的要求进行定制。