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

Question

如果我运行的代码没有＆＃39; if＆＃39;条件，切换按钮工作得很好，但我希望切换按钮隐藏，如果我有更少的数据和/或如果有更多的数据出现。我还希望最小内容div高度为100px。请帮我。感谢。

＆＃13;

＆＃13;

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";
}

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>