如何创建隐藏和显示常见问题解答？
[英]How to create a hide and show FAQ?
问题描述
I am doing a FAQ page for my website and currently I am stuck in a place. 
我正在为我的网站做一个FAQ页面，当前我被卡在一个地方。 I want to create a page such that on clicking the question the answer is shown and on clicking another question should open and the previous answer should hide automatically. 我想创建一个页面，以便在单击问题时显示答案，在单击另一个问题时应打开，并且先前的答案应自动隐藏。 to some far I was successful in doing it, I could open a new question and the previous question was hiding and the new questions answer was shown. 在某种程度上，我可以成功地做到这一点，我可以打开一个新问题，而先前的问题被隐藏起来，并且显示了新问题的答案。 But if i go and click on the previous question again it didn't open. 但是，如果我再次单击上一个问题，它就没有打开。
here is the code that I had written 这是我写的代码
$(document).ready(function() { $("#container li").click(function() { $("#container p").slideUp(); var text = $(this).children('div.panel'); if (text.is(':hidden')) { text.slideDown('200'); $(this).children('span').html('-'); } else { text.slideUp('200'); $(this).children('span').html('+'); } }) });
#container { list-style: none; font-family: arial; font-size: 20px; } #container li { margin: 10px; border-bottom: 1px solid #ccc; position: relative; cursor: pointer; } #container h3 { margin: 0; font-size: 24px; } #container span { position: absolute; right: 5px; top: 0; color: #000; font-size: 18px; } #container .panel { margin: 5px 0; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="container"> <li> <h3>this is first</h3> <span>+</span> <div class="panel"> <p>Hello</p> </div> </li> <li> <h3>this is second</h3> <span>+</span> <div class="panel"> <p>helelo</p> </div> </li> <li> <h3>this is third</h3> <span>+</span> <div class="panel"> <p>how are you</p> </div> </li> </ul>
3 个解决方案
解决方案1
1 2015-02-05 12:00:11
You can use slideToggle() and slideUp() for this: 您可以slideToggle()使用slideToggle()和slideUp() ：
$("#container li").click(function(){
$(this).find('div').slideToggle();
$(this).children('span').html('-');
$("#container li").not(this).find('div').slideUp();
$("#container li").not(this).children('span').html('+');
});
解决方案2
1 2015-02-05 12:02:33
You could use jquery's find() , along with the slideToggle() method to refactor your jquery: 您可以使用jquery的find()以及slideToggle()方法来重构jquery：
$(document).ready(function() {
$("#container li").click(function() {
$('#container li div').slideUp();
$('#container li span').text('+');
$(this).find('.panel').slideToggle();
$(this).find('span').text('-');
});
});
Live Demo: 现场演示：
$(document).ready(function() { $("#container li").click(function() { $('#container li div').slideUp(); $('#container li span').text('+'); $(this).find('.panel').slideToggle(); $(this).find('span').text('-'); }); });
#container { list-style: none; font-family: arial; font-size: 20px; } #container li { margin: 10px; border-bottom: 1px solid #ccc; position: relative; cursor: pointer; } #container h3 { margin: 0; font-size: 24px; } #container span { position: absolute; right: 5px; top: 0; color: #000; font-size: 18px; } #container .panel { margin: 5px 0; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="container"> <li> <h3>this is first</h3> <span>+</span> <div class="panel"> <p>Hello</p> </div> </li> <li> <h3>this is second</h3> <span>+</span> <div class="panel"> <p>helelo</p> </div> </li> <li> <h3>this is third</h3> <span>+</span> <div class="panel"> <p>how are you</p> </div> </li> </ul> </body>
解决方案3
0 2015-02-05 12:05:46
Why not just use one of the millions of accordions plugins out there, instead of reinventing the wheel? 为什么不只使用那里的数百万个手风琴插件中的一个，而不是重新发明轮子呢？ Like jQueryUI accordion . 就像jQueryUI手风琴一样。 Here are 10 others . 这里还有10个人 。 Hope it helps :) 希望能帮助到你 ：）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.