Jquery 显示/隐藏常见问题解答,文本被覆盖
Jquery Show/Hide FAQ, text covered up
我正在使用一些Jquery来显示/隐藏网站上的问题的答案,但在文本的底部被掩盖了。我认为问题在于 Jquery 代码,但我无法对它进行正面或反面。请帮忙!
<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: ↡</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: ↡</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>
在 .faq_answerdiv 的列表元素上有一个边距顶部和底部,newheight 没有考虑该边距。
添加此样式可解决此问题。
.faq_answer ol {
margin: 0px;
}
相关文章:
- 使用 clearRect() 覆盖画布上的文本输出
- 文本框的 CSS 文本选择覆盖
- 根据覆盖的背景区域的亮度更改文本颜色
- 用对话框覆盖文本输入
- Three.js中的文本覆盖会中断拖动
- 是否覆盖网站上文本输入区域的默认移动设备键盘?(HTML/JS/jQuery)
- 使用回调函数时,加载会覆盖输入文本框
- 覆盖元素.样式表.css文本
- 动态覆盖jqueryUI对话框按钮(保存,取消等到用户选择)文本
- 用 php 覆盖包含特定用户名的文本文件中的一行
- Jquery 显示/隐藏常见问题解答,文本被覆盖
- 添加但不覆盖文本
- 在特定位置将文本框覆盖在图像上
- Mopub移动web/javascript实现调整文本大小/覆盖CSS
- 悬停在图像上的浮动文本覆盖
- 如何覆盖默认值“;文本“;鼠标下移,鼠标移动
- 添加文本覆盖到我的Vimeo全屏背景-iframe-
- 响应文本覆盖在图像的顶部
- 我如何有一个图像保持固定在页面上,但有一个文本覆盖移动
- 将变量中的文本覆盖在每个图像的底部