如何根據數據或多或少隱藏或顯示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>