4

自分のサイトのFAQページにJavaScriptコードがあります。したがって、質問をクリックすると、回答が表示されます。今、私が理解できないのは、ある質問をクリックしてそれが開いているとき、別の質問をクリックしたときに前の質問を閉じたいということです。基本的に、一度に開いているのは1つだけです。同様のコードが見つかりましたが、私が探しているものとは異なります。

どんな助けでも素晴らしいでしょう、これが私のコードです。ありがとう！！！！ケイト

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

各アイテムは好きなものにすることができ、フレームワークは必要ありません。単なる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 に答える