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

事件侦听器的逻辑如下：

• 在每个平铺的
• 上有一个onclick，当单击第一个
• 时，在所有tiles
• 上定义新的click侦听器，在新定义的侦听器中，实现将active-tile类分配给所需元素H29F 210的逻辑。

这样，您的第一次单击就不会将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/