CSS Flex - 单击时元素底部的随机空白

Question

抱歉，这可能会在不查看的情况下理解错误 - 但我使用 Flex 创建了响应式网格，在单击磁贴时扩展内容。它以两种我无法理解的方式表现得很奇怪，首先，当第一次加载页面并单击第一个图块时，它会展开，但似乎没有添加 .active-tile（背景绿色） - 它之后每次都有效。其次，仅在设备 961px> 上，再次单击第一个图块时不会发生，但会在 tile 元素的底部创建一个随机空格，有人可以建议这可能是什么吗？

工作小提琴：https://jsfiddle.net/simoncunningham/zsLxuo26/17/

任何建议将不胜感激！

<div class="box">
      <div class="tile" onclick="openTab('b1');">
        <img src="./Icons/Banking.svg" />
        <p>Banking</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b1" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Banking</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b2');">
        <img src="./Icons/RegTech.svg" />
        <p>RegTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b2" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>RegTech</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b3');">
        <img src="./Icons/InsurTech.svg" />
        <p>InsurTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b3" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>InsurTech</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b4');">
        <img src="./Icons/Lending.svg" />
        <p>Lending</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b4" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Lending</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="box">
      <div class="tile" onclick="openTab('b5');">
        <img src="./Icons/Accounting.svg" />
        <p>Accounting</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b5" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Accounting</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b6');">
        <img src="./Icons/Payments.svg" />
        <p>Payments</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b6" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Payments</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b7');">
        <img src="./Icons/Quote.svg" />
        <p>Quote</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b7" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>Quote</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
      <div class="tile" onclick="openTab('b8');">
        <img src="./Icons/WealthTech.svg" />
        <p>WealthTech</p>
        <img class="arrow-down" src="./Icons/arrow-down.png" />
      </div>
      <div id="b8" class="content" style="display: none; background: black">
        <span onclick="this.parentElement.style.display='none'" class="closebtn"
          >&times;</span
        >
        <div class="description">
          <h3>WealthTech</h3>
          <p>
            The largest category covering investment and management platforms,
            sales and trading analysis toosl, personal finance management &
            crypto exchanges.
          </p>
          <ul>
            <li>Personal Finance Management (PFM)</li>
            <li>Investment Data and Information Services</li>
            <li>Trading and Investment Platforms</li>
            <li>WealthTech Operations</li>
            <li>Distributed Ledger Technologies & Cryptocurrencies</li>
            <li>Robo Advisors</li>
          </ul>
        </div>
      </div>
    </div>

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.box {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.tile,
.active-tile,
.content {
  box-sizing: border-box;
}

.tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  background-color: #222;
  border: 1px solid grey;
  height: 150px;
  text-align: center;
  font-size: 16px;
  color: white;
  cursor: pointer;
}

.active-tile {
  flex: 1 0 auto;
  order: 0;
  flex-basis: 25%;

  /* For visual only  */
  text-align: center;
  border: 1px solid #000;
  background-color: green;
  height: 125px;
  cursor: pointer;
}

.content {
  order: 1;
  flex: 1 0 100%;

  /* For visual only  */
  padding: 20px;
  color: white;
  text-align: center;
  border: 1px solid #000;
  background-color: #228b22;
}

.description {
  text-align: left;
}

.icon-spacing {
  margin-top: 24px;
}

/* Clear floats after the tiles */
.box:after {
  content: "";
  display: table;
  clear: both;
}

.closebtn {
  float: right;
  color: white;
  cursor: pointer;
}

.arrow-down {
  width: 25px;
  height: 25px;
}

.arrow-up {
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

/* 
  "Desktop" and above
 */
@media (max-width: 480px) {
  .box {
    flex-direction: column;
  }

  .content {
    order: 0;
  }
}

  function openTab(tabName) {
        var i, x;
        x = document.getElementsByClassName('content');
        for (i = 0; i < x.length; i++) {
          x[i].style.display = 'none';
        }
        document.getElementById(tabName).style.display = 'block';

        // Get all the tabs into a collection
        // (don't use .getElementsByClassName()!)
        let tabs = document.querySelectorAll('.tile');

        // Set up a click event handler on each of the tabs
        tabs.forEach(function (tab) {
          tab.addEventListener('click', function (event) {
            // Loop over all the tabs and remove the active class
            tabs.forEach(function (tab) {
              tab.classList.remove('active-tile');
              tab.children[2].classList.remove('arrow-up');
            });

            // Set the background of the clicked tab
            this.classList.add('active-tile');
            tab.children[2].classList.add('arrow-up');
          });
        });
      }

Answer 1

你的事件监听器的逻辑是这样的：

• 每个磁贴 div 上都有一个 onclick
• 单击第一个时，您会在所有图块上定义新的 click 侦听器
• 在新定义的侦听器中，实现将active-tile 类分配给所需元素的逻辑

这样，您的第一次点击不会将active-tile 提供给所需的元素。关于您的代码，您需要将第二个参数从您的 html 传递给 openTab。 event 是内置的，默认工作，例如：

<div class="tile" onclick="openTab('b1', event);"></div>

然后在你的 .js 中：

function openTab(tabName, event) {
  event.target.classList.add("active-tile");
  event.target.children[2].classList.add("arrow-up");
  // ... rest of the function body is fine
}

这对绿色背景的东西很有效。

关于瓷砖下的白色小东西，你给了它们一个height: 125px，它比它们的父级 (box) 小。删除height 应该没问题。 tile 将占据所有可用的高度。

这是编辑后的小提琴：

https://jsfiddle.net/g54umqfL/3/