4

我有一些用于我网站的常见问题解答页面的 javascript 代码。因此，您单击问题并出现答案。现在，我想不通的是，当我单击一个问题并打开时，当我单击另一个问题时，我希望前一个问题关闭。基本上，所以一次只有一个开放。找到了类似的代码，但不完全是我想要的。

任何帮助都会很棒，这是我的代码。谢谢！！！！凯特

<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>
4

5 回答 5

2

使用变量来存储对先前显示元素的引用，然后在显示要取消隐藏的元素之前隐藏它

<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>

示例
http://jsfiddle.net/hLkks

于 2013-03-01T14:33:46.417 回答
1

给所有答案一个类名，然后将它们全部选中并隐藏它们，然后再显示您刚刚单击的答案。如果你使用 jQuery

$(".answers").addClass("hidden");
$("#"+id).removeClass("hidden");
于 2013-03-01T14:29:55.007 回答
1

有一个非常简单的方法。改进 Wryte 的答案，只需向所有项目添加一个单击事件，该事件会向活动项目添加一个类并将其从所有其他项目中删除。

item.addEventListener("click", function () {
    var items = this.parentNode.childNodes;

    for (var i=0; i < items.length; i++) {
        items[i].className = "";
    }
    this.className = "active";
}, false);

小提琴：http: //jsfiddle.net/Met3T/

每个项目都可以是你喜欢的任何东西，你不需要任何框架，只需要简单的 ole JavaScript。

CSS 可以像这样简单：

li {
    height: 2em;
    background: green;
    overflow: hidden;
    margin-bottom: 5px;
}
.active {
    height: auto;
}
于 2013-03-01T14:45:04.173 回答
0 
$(".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()
                    }
                });

这是一个示例，如果类被展开或折叠，它看起来

<a class='toggle expanded' href='#'>Text</a>

所以在你的 CSS 中做一个展开和折叠

于 2013-03-01T14:34:41.717 回答
0 
<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>
于 2013-03-01T14:38:08.363 回答