[英]Showing & Hiding Text with Javascript
I have some javascript code for a FAQ page for my site. 我的网站的常见问题解答页面有一些javascript代码。 So, you click on the question and the answer appears. 因此,您单击该问题并显示答案。 NOW, what I can't figure out is when I have clicked on one question and that is open, when I click on another I want the previous one to close. 现在,我无法弄清楚当我点击一个问题并且打开时,当我点击另一个问题时,我希望前一个问题关闭。 Basically, so there is only ever ONE open at a time. 基本上,所以一次只有一个开放。 Found similar code, but not exactly what I'm looking for. 找到了类似的代码,但不完全是我正在寻找的。
Any help would be great, here's my code. 任何帮助都会很棒,这是我的代码。 THANKS!!!! 谢谢!!!! Kait KAIT
<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<p><a href="javascript:unhide('q1');">Here is my Question???</a></p>
<div id="q1" class="hidden">
<p>The Answer goes here.</p>
</div>
<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p>
<div id="q2" class="hidden">
<p>The 2nd Answer goes here.</p>
</div>
use a variable to store a reference to the previously shown element, then hide it before showing the one you want to unhide 使用变量存储对先前显示的元素的引用,然后在显示要取消隐藏的元素之前隐藏它
<script type="text/javascript">
var previous;
function unhide(divID) {
var item = document.getElementById(divID);
if (previous != null)
previous.className='hidden';
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
previous = item;
}
}
</script>
<p><a href="javascript:unhide('q1');">Here is my Question???</a></p>
<div id="q1" class="hidden">
<p>The Answer goes here.</p>
</div>
<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p>
<div id="q2" class="hidden">
<p>The 2nd Answer goes here.</p>
</div>
Example 例
http://jsfiddle.net/hLkks http://jsfiddle.net/hLkks
Give all the answers a class name then select them all and hide them before you reveal the one that you just clicked. 给出所有答案一个类名,然后选择它们并隐藏它们,然后再显示您刚刚单击的那个。 If you are using jQuery 如果你正在使用jQuery
$(".answers").addClass("hidden");
$("#"+id).removeClass("hidden");
There is a really simple approach. 有一个非常简单的方法。 Improving on Wryte's answer, just add a click event to all items which adds a class to the active one and removes this from all the others. 改进Wryte的答案,只需将click事件添加到所有项目中,这些项目会将一个类添加到活动项目中,并将其从所有其他项目中删除。
item.addEventListener("click", function () {
var items = this.parentNode.childNodes;
for (var i=0; i < items.length; i++) {
items[i].className = "";
}
this.className = "active";
}, false);
Fiddle: http://jsfiddle.net/Met3T/ 小提琴: http : //jsfiddle.net/Met3T/
Each item can be whatever you like and you don't need any framework, just plain ole JavaScript. 每个项目都可以是您喜欢的任何项目,您不需要任何框架,只需简单的JavaScript。
The CSS could be simple as this: CSS可以很简单,因为:
li {
height: 2em;
background: green;
overflow: hidden;
margin-bottom: 5px;
}
.active {
height: auto;
}
$(".header a.toggle").click(function(){
if($(this).hasClass("expanded")){
$(this).removeClass("expanded").addClass("collapsed")
.parent().siblings(".body").hide()
}
else{
$(this).removeClass("collapsed").addClass("expanded")
.parent().siblings(".body").show()
}
});
Heres a example where it looks if class is expanded or collapsed 下面是一个示例,它可以查看类是否已展开或折叠
<a class='toggle expanded' href='#'>Text</a>
So make a expanded and collapsed in your CSS 因此,在CSS中进行扩展和折叠
<script type="text/javascript">
var currentItem;
function unhide(divID) {
if (currentItem) {
currentItem.className = 'hidden';
currentItem = null;
}
var item = document.getElementById(divID);
if (item) {
item.className = 'unhidden';
currentItem = item;
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.