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

Question

如果我在不使用'if'条件的情况下运行代码，则切换按钮效果很好，但是如果我有较少的数据，则希望切换按钮隐藏，如果有更多的数据，则希望出现切换按钮。 我还希望内容div的最小高度为100px。 请帮我。 谢谢。

 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，则存在一个额外的子div计数。

该代码通常在下面的代码段中进行了重新排列和注释。

 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>