javascript - 为什么每次调整窗口大小时两个 div 之间的长度小于 10 时，类 `d-none` 都会切换？

Question

主要目标是当right容器的宽度rightButtonGroupWrapper小于10和不小于show时隐藏图标difference10

我要做的是仅显示和icons之间的长度小于. 但是每次我调整. 我无法弄清楚这里有什么问题？right container widthright button group10window

const props = el => el.getBoundingClientRect();

const right = document.querySelector(".right")
const dropdown = document.querySelector(".dropdown")
const rightButtonGroupWrapper = document.querySelector(".rightButtonGroup");
const allIcons = [...rightButtonGroupWrapper.querySelectorAll("i")];
const allTexts = [...rightButtonGroupWrapper.querySelectorAll(".text-inner")];

function handleWidthChange(e) {
  const rightContainerProps = props(right);
  const rightButtonGroupWrapperProps = props(rightButtonGroupWrapper);

  const rightContainerWidth = rightContainerProps.width;
  const rBtnGrpWidth = rightButtonGroupWrapperProps.width;
  const diff = rightContainerWidth - rBtnGrpWidth;

  if (diff < 10) {
    allIcons.forEach(icon => icon.classList.remove("d-none"));
    allTexts.forEach(text => text.classList.add("d-none"));
  } else {
    allIcons.forEach(icon => icon.classList.add("d-none"));
    allTexts.forEach(text => text.classList.remove("d-none"));
  }
}

window.addEventListener('resize', handleWidthChange, true);

.test-container {
  margin-top: 3rem;
  background-color: bisque;
  padding: 0.5rem 0.5rem;
  display: flex;
}

.left {
  display: flex;
  gap: 0.5rem;
}

.right {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.rightButtonGroup {
  display: flex;
  gap: .5rem;
}

.drop-out {
  background-color: blueviolet;
  border-radius: 4px;
  color: white;
  padding: .5rem;
  text-decoration: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="test-container">

  <div class="left">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
          </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
          </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>

  <div class="right">
    <span class="rightButtonGroup">
          <a class="drop-out" href="#">
            <i class="d-none fab fa-apple"></i>
            <span class="text-inner">Action</span>
    </a>
    <a class="drop-out" href="#">
      <i class="d-none fab fa-apple"></i>
      <span class="text-inner">Another action</span>
    </a>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    </span>
  </div>

</div>

标签： javascripthtmlcss

Answer 1

如评论中所述，闪烁是因为系统认为文本有空间（当图标在那里时）所以它把文本放进去，然后表明实际上没有空间所以它回到图标和这会重复。

查看文本版本是否有空间的一种方法是确保它们是在调整大小功能开始时设置了显示的版本。然后该功能可以计算出是否有空间，然后显示正确的东西。没有闪烁，因为虽然显示已设置，然后可能未设置，但所有这些都在一个 JS 函数中，因此在两种显示设置之间没有重新绘制屏幕。

const props = el => el.getBoundingClientRect();

const right = document.querySelector(".right")
const dropdown = document.querySelector(".dropdown")
const rightButtonGroupWrapper = document.querySelector(".rightButtonGroup");
const allIcons = [...rightButtonGroupWrapper.querySelectorAll("i")];
const allTexts = [...rightButtonGroupWrapper.querySelectorAll(".text-inner")];

function handleWidthChange(e) {

  // ADDED TO RESET TO HAVE TEXT NOT ICONS SO WE CAN SEE IF THERE IS ROOM FOR THEM NOW
  allIcons.forEach(icon => icon.classList.add("d-none"));
  allTexts.forEach(text => text.classList.remove("d-none"));

  const rightContainerProps = props(right);
  const rightButtonGroupWrapperProps = props(rightButtonGroupWrapper);

  const rightContainerWidth = rightContainerProps.width;
  const rBtnGrpWidth = rightButtonGroupWrapperProps.width;
  const diff = rightContainerWidth - rBtnGrpWidth;

  if (diff < 10) {
    allIcons.forEach(icon => icon.classList.remove("d-none"));
    allTexts.forEach(text => text.classList.add("d-none"));
  } else {
    allIcons.forEach(icon => icon.classList.add("d-none"));
    allTexts.forEach(text => text.classList.remove("d-none"));
  }
}

window.addEventListener('resize', handleWidthChange, true);

.test-container {
  margin-top: 3rem;
  background-color: bisque;
  padding: 0.5rem 0.5rem;
  display: flex;
}

.left {
  display: flex;
  gap: 0.5rem;
}

.right {
  display: flex;
  justify-content: flex-end;
  flex: 1;
}

.rightButtonGroup {
  display: flex;
  gap: .5rem;
}

.drop-out {
  background-color: blueviolet;
  border-radius: 4px;
  color: white;
  padding: .5rem;
  text-decoration: none;
}

</style>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="test-container">

  <div class="left">
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
              </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                Dropdown button
              </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>

  <div class="right">
    <span class="rightButtonGroup">
              <a class="drop-out" href="#">
                <i class="d-none fab fa-apple"></i>
                <span class="text-inner">Action</span>
    </a>
    <a class="drop-out" href="#">
      <i class="d-none fab fa-apple"></i>
      <span class="text-inner">Another action</span>
    </a>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">...</button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
    </span>
  </div>

</div>