javascript - 如何在 JavaScript 中制作 if 条件的 css 高度

Question

我有一个文本，当我点击它时应该切换。如果我没有样式条件，它就可以工作，但我如何用样式完成它。

HTML代码

    <section class="discription-list">
           <div class="description-title">
             <h3 class="button1">Description</h3>
             <h3 class="button2">Product Detail</h3>
             <h3 class="button3">Shipping Info</h3>
           </div>


           <div class="toggle-list"></div>
        </section>

CSS 代码

.toggle-list{
    position: relative;
    top: 0px;
    left: 10%;
    width: 80%;
    height: 0px;
    margin-bottom: 10%;
    border-bottom: 1px solid grey;
    overflow: hidden;
    transition: 0.3s;
}

JavaScript 代码

var btnt = document.querySelector('.description-title');
      btnt.addEventListener('click', toggleClick);

           function toggleClick(e) {
            var div = document.querySelector('.toggle-list');

              if (e.target === document.querySelector('.button1') && div.style.height === '0px') {
                var tag1 = '<div id="wrapper1" class="open1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ante eget lorem varius, ut lacinia leo finibus. Nam commodo luctus odio ac consectetur. Donec vel magna nec augue condimentum condimentum ut a neque. Mauris leo sem, tincidunt ac vulputate eget, ullamcorper vitae velit. Morbi a sem laoreet tellus bibendum iaculis non eu mauris. Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ante eget lorem varius, ut lacinia leo finibus. Nam commodo luctus odio ac consectetur. Donec vel magna nec augue condimentum condimentum ut a neque. Mauris leo sem, tincidunt ac vulputate eget, ullamcorper vitae velit. Morbi a sem laoreet tellus bibendum iaculis non eu mauris. Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum.</p></div>';
                    div.innerHTML = tag1;
                    div.style.height = '160px';
              }else if (e.target === document.querySelector('.button2') && div.style.height === '0px') {
                var tag1 = '<table><tr><td class="td">Date First Available</td><td class="td2">18 June 2018</td></tr><tr><td class="td">Item part number</td><td class="td2">SVJG972080_1</td></tr><tr><td class="td">Color</td><td class="td2">White</td></tr><tr><td class="td">Material Type</td><td class="td2">velvet upper and rubber sole</td></tr><tr><td class="td">Shoes size</td><td class="td2">38</td></tr></table>';
                    div.innerHTML = tag1;
                    div.style.height = '180px';
              }else if (e.target === document.querySelector('.button3') && div.style.height === '0px') {
                var tag1 = '<div id="wrapper3" class="open1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur ante eget lorem varius, ut lacinia leo finibus. Nam commodo luctus odio ac consectetur. Donec vel magna nec augue condimentum condimentum ut a neque. Mauris leo sem, tincidunt ac vulputate eget, ullamcorper vitae velit. Morbi a sem laoreet tellus bibendum iaculis non eu mauris. Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum. </p></div>';
                    div.innerHTML = tag1;
                    div.style.height = '140px';
              }
           }

Answer 1

改变:

 && div.style.height === '0px'

收件人:

 && div.clientHeight == 0

这将访问浏览器对元素高度(不包括其边框)的计算，这是确定元素最终高度的所有 CSS 和内部内容计算的结果。您的初始代码不起作用，因为您要求查看“高度”内联样式属性的值(如 <div style="height:200px"> 中所示)。您的 div 没有将该属性设置为任何内容。