2つのメインテーマでFAQの高さを自動的に上げる方法は？

Question

私はここにjsfiddleを作成する2つの主要テーマと私のサイトでよくある質問..

を持っている：https://jsfiddle.net/kuwr2vhn/

MY ISSUE：

よくある質問B - OK取り組んでいる - しかし、よくある質問A - ISN」 t。

どちらのよくある質問はidenticals（私はコピー＆ペースト）している---しかし....よくある質問BIの

は「TRICK」を作り、私は手動で増加して最後に「BR」タグの多くを置きますFAQの高さ高さがあまりにも表示幅に応じて変化しますので..私は小さなデバイスを持っている場合 - Aが..

このトリックを持っていません。しかし、このトリックは、これを行うための最善の方法ではありません

よくある質問 - 幅は小さくなり、高さは異なります。

と別の問題 - この「BR」トリックを使用してFAQをクリックすると、FAQ Bが大幅にダウンし、最終的なユーザーにとっては何が起こるのか分かりません。

高さを自動制御するソリューションが必要です。

// Question handler 
    $('li.q').on(action, function(){ 

    // gets next element 
    // opens .a of selected question 
    $(this).next().slideToggle(speed) 

    // selects all other answers and slides up any open answer 
    .siblings('li.a').slideUp(); 

    // Grab img from clicked question 
    var i = $(this).children('i'); 

    // remove Rotate class from all images except the active 
    $('i').not(i).removeClass('rotate'); 

    // toggle rotate class 
    i.toggleClass('rotate'); 

    }); 


$('.faq_question').click(function() { 

     if ($(this).parent().is('.open')){ 
      $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500); 
      $(this).closest('.faq').removeClass('open'); 

      }else{ 
       var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px'; 
       $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500); 
       $(this).closest('.faq').addClass('open'); 
      } 

    }); 

Answer 1

これは間違っています。あなたの答えが李であり、それ自身の親を持たないので、動的ではありません。動的にする方法は次のとおりです。

var faq_clicker = document.querySelectorAll('.faq--clicker') || document.querySelector('.faq--clicker'), 
 
\t question = document.querySelectorAll('.question') || document.querySelector('.question'); 
 

 
[].forEach.call(faq_clicker, elem => { 
 
    elem.onclick = (e) => { 
 
    let par = e.target.nextElementSibling; 
 
    
 
    if(par.classList.contains('active')) par.classList.remove('active'); 
 
    else par.classList.add('active'); 
 
    } 
 
}); 
 

 
[].forEach.call(question, elem => { 
 
    elem.onclick = (e) => { 
 
    let par = e.target.querySelector('.answer'), 
 
     afn = document.querySelector('.answer-active'); 
 
    
 
    if(afn) afn.classList.remove('answer-active'); 
 
    
 
    if(par.classList.contains('answer-active')) par.classList.remove('answer-active'); 
 
    else par.classList.add('answer-active'); 
 
    } 
 
});

ul.parent, ul.answer { 
 
    max-height: 0; 
 
    overflow: hidden; 
 
    transition: max-height 0.2s ease-in-out; 
 
} 
 

 
ul li { 
 
    cursor: pointer; 
 
} 
 

 
ul.parent.active, ul.answer.answer-active { 
 
    max-height: 500px; 
 
    transition: max-height 0.5s ease-in-out; 
 
}

<div class="faq-holder"> 
 
    <a href="#" class="faq--clicker">FAQ A</a> 
 
    
 
    <ul class="parent"> 
 
    <li class="question"> 
 
     <i class="icon-chevron-right"></i> 
 
     What is my name? 
 
     <ul class="answer"> 
 
     <li>I don't know also.</li> 
 
     </ul> 
 
    </li> 
 
    <li class="question"> 
 
     <i class="icon-chevron-right"></i> 
 
     Who's my girl? 
 
     <ul class="answer"> 
 
     <li>Jeamzy Chavez.</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div> 
 

 
<div class="faq-holder"> 
 
    <a href="#" class="faq--clicker">FAQ B</a> 
 
    
 
    <ul class="parent"> 
 
    <li class="question">What is your favorite food? 
 
     <ul class="answer"> 
 
     <li>Tae.</li> 
 
     </ul> 
 
    </li> 
 
    <li class="question">What do I want to learn? 
 
     <ul class="answer"> 
 
     <li>Create programming language.</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

ただ、HTMLに従ってください。そしてそれは正しく動作します。そしてもちろん、スタイルを編集してください。私はスタイルが良くないので、私はあなたのための機能を作成しています。

希望します。乾杯！