Как сделать, если условие высоты CSS в JavaScript - PullRequest
Новая
       13

Как сделать, если условие высоты CSS в JavaScript

0 голосов
/ 01 ноября 2018

У меня есть текст, который при нажатии на него должен переключаться. Это работает, если у меня нет условия стиля, но как я могу сделать это с помощью стиля.

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

Ответы [ 2 ]

0 голосов
/ 04 ноября 2018

использование offsetHeight метод 

if (e.target === document.querySelector('.button1') && div.offsetHeight === 0) {
            var tag1 = 
           '<div id="wrapper1" class="open1">
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.  Nam ut interdum massa, ac lacinia velit. Praesent imperdiet fringilla interdum.
                </p>
            </div>';
                div.innerHTML = tag1;
                div.offsetHeight = 160;
          }else if (e.target === document.querySelector('.button2') && div.offsetHeight ===  0) {
            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 rubbersole</td>
                           </tr>
                           <tr>
                               <td class="td">Shoes size</td>
                               <td class="td2">38</td>
                           </tr>
                       </table>';
                div.innerHTML = tag1;
                div.offsetHeight = 180;
          }else if (e.target === document.querySelector('.button3') && div.offsetHeight === 0) {
            var tag1 = '<div id="wrapper3" class="open1">
                          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet fringilla interdum. 
                          </p>
                       </div>';
                div.innerHTML = tag1;
                div.offsetHeight = 140;
          }
0 голосов
/ 01 ноября 2018

Изменение: 

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

Кому: 

 && div.clientHeight == 0

Это даст доступ к вычислению браузером высоты элемента (исключая его границы), которая является результатом всех вычислений CSS и внутреннего содержимого, которые определяют конечную высоту элемента. Ваш исходный код не работал, потому что вы просили увидеть значение свойства встроенного стиля "height" (как в <div style="height:200px">). У вашего div нет этого свойства.

...