jQuery显示/隐藏FAQ，文字被遮盖

Question

I am using some Jquery to show/hide answers to question on a site, but at the bottom of the text covered up. I think the promblem is withe the Jquery code, but I can not make heads or tails of it. Please Help!

 <script> $(document).ready(function() { $('.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'); } }); }); </script> 

 /*FAQS*/ .faq_question { margin: 0px; padding: 30px 0px 10px 0px; font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 18px; display: inline-block; cursor: pointer; font-weight: bold; color: #666666; } .faq_answer_container { height: 0px; overflow: hidden; padding: 0px; font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif; font-size: 17px; line-height: 1.5em; text-align: justify; color: #666666; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <h1>Why do I need Life Insurance?</h1> <div class="faq_container"> <div class="faq"> <div class="faq_question">To Protect Your Family: &#8609;</div> <div class="faq_answer_container"> <div class="faq_answer"> <ol> <li><strong>Provide income:</strong> Life insurance can't replace you, but it can replace some or all of your income if you die. It can cover the cost of funeral expenses and help pay off debts, as well as day-to-day expenses, like food, clothing, and housing. For the longer term, life insurance can help pay for college tuition or ensure retirement dreams are realized.</li> <li><strong>Help with household needs:</strong> Think of all the work a stay-at-home parent provides. It's invaluable, and insuring them is too. Life insurance can pay for vital household services like childcare, transportation and household chores.</li> <li><strong>Supply benefits you can use during your lifetime:</strong> If you choose whole life insurance, the cash value in your policy, the “living benefits,” can help pay for life's events such as buying a home, a wedding, or educational expenses. As you pay the premiums of your whole life policy, the cash value builds and you can access those funds. Some important things to keep in mind, the cash value in a whole life insurance policy is accessed through policy loans, which accrue interest at the current rate. Loans will decrease the death benefit and cash value.</li> <li><strong>Leave a lasting legacy:</strong> Life insurance can create a financial legacy – funding the future and fueling dreams. From a favorite nonprofit to starting a scholarship program – the legacy you leave behind is all up to you.</li> </ol> </div> </div> </div> <div class="faq"> <div class="faq_question">Replacing Your Income: &#8609;</div> <div class="faq_answer_container"> <div class="faq_answer">Term life insurance is the most affordable way to replace your income if something happens to you. Men and women in excellent health in their mid-30's and 40's can buy $100,000+ of term life insurance for under a dollar a day. You can buy term life insurance for exactly the amount of protection you need, for exactly the time you need it. There is no greater feeling than knowing that your family will have sufficient income if something were to happen to you. Make sure that your family is taken care of, and get a <a href="get-personalized-quote.html">free quote</a> today.</div> </div> </div> </div> </div> 

Answer 1

There is a margin top and bottom on the list element in the .faq_answer div that the newheight is not accounting for.

Adding this styling fixes that.

.faq_answer ol { margin: 0px; }