javascript - 如何根据数据或多或少隐藏或显示div下方的按钮

Question

如果我在没有“if”条件的情况下运行代码，则切换按钮工作得很好，但我希望切换按钮在数据较少时隐藏和/或在数据较多时显示。我还想要 100 像素的最小内容 div 高度。请帮我。谢谢。

var elmnt = document.querySelector(".backwhite");
var txt = elmnt.clientHeight + "px";
if (txt >= 100 + "px") {
  var mydivh = document.querySelector(".backwhite");
  mydivh.style.height = "100px";

  function toggleDescriptionHeight(e) {
    document.querySelector(".backwhite").classList.toggle('expanded');
    e.target.textContent == 'Expand' ? e.target.textContent = 'Collapse' : e.target.textContent = 'Expand';
  }
  var button = document.querySelector('.btn');
  button.addEventListener('click', toggleDescriptionHeight)
} else {

  var myElements = document.querySelector(".bbttnn");
  myElements.style.display = "none";
  var myElement = document.querySelector(".backwhite");
  myElement.style.height = "100px";
}

body {
  background-color: #f1f3f6;
}
.backwhite {
  background-color: #fff;
  padding: 15px;
  overflow: hidden;
}
.backwhite.expanded {
  height: auto;
}

<div class="container">
  <h4>Description</h4>
  <div class="backwhite">
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>-->
  </div>
  <button type="button" class="btn btn-default btn-block">Expand</button>
</div>

Answer 1

对相同的变量进行了多次重新定义，修改了 CSS 以处理所有高度定义，并且整理了 if 语句以删除“px”(这会干扰比较器的数学运算)。

请注意，如果最小高度(也最好在 CSS 中定义)设置为 100px，则 JS 代码将无法隐藏按钮。所以有一个子 div 的添加计数，如果少于 3，则允许按钮隐藏。

代码在下面的代码片段中进行了大体上的重新排列和注释。

var elmnt = document.querySelector(".backwhite"),
  txt = elmnt.clientHeight,
  button = document.querySelector('.btn');
// elmnt only needs to be defined once

function toggleDescriptionHeight(e) {
    elmnt.classList.toggle('expanded');
    if (e.target.textContent === 'Expand') {
      e.target.textContent = 'Collapse';
    } else {
      e.target.textContent = 'Expand';
    }
  } // this function has been moved out of the if condition

if (txt >= 100 && elmnt.children.length > 3) { // the 'txt >= 100 &&' can go
  button.addEventListener('click', toggleDescriptionHeight);
} else {
  button.style.display = "none";
}

body {
  background-color: #f1f3f6;
}
.backwhite {
  background-color: #fff;
  padding: 15px;
  height: 100px;
  /* height defined here */
  /*  min-height: 100px; */
  overflow: hidden;
}
/* note that if the minimum height is 100 you will always have the button */

.expanded {
  /* this should come after .backwhite */
  height: auto;
}

<div class="container">
  <h4>Description</h4>
  <div class="backwhite">
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
    <p>1. Create Ui For Email Campaign.</p>
    <p>2. Create Functionality of Email Campaign</p>
    <p>3. Create Keyword Display using Drag And Drop Functionality.</p>
  </div>
  <button type="button" class="btn btn-default btn-block">Expand</button>
</div>