javascript - 非表示のコンテンツを持つ li のリストを展開しています

Question

現在、次のリンクと同様の設定があります。

http://jsfiddle.net/d33zC/5/

問題のdiv:

<ul>
<li>
    <a href="#" onclick="toggle2('question', this);">Question</a>
    <div id="question" style="display:none; margin:0px;">
        <input type="text" />
    </div>
</li>
<li>
    <a href="#" onclick="toggle2('question2', this);">Question</a>
    <div id="question2" style="display:none; margin:0px;">
        <input type="text" />
    </div>
</li>
<li>
    <a href="#" onclick="toggle2('question3', this);">Question</a>
    <div id="question3" style="display:none; margin:0px;">
        <input type="text" />
    </div>
</li>

これらの div には、拡張された非表示のコンテンツが既に含まれていることに注意してください。</p>

現在、多くの質問が生成されています。私は、クリックまたは自動的に (Google 画像または Twitter のように) 残りの div で展開できる制限付きリストを保持する必要がある時点にいます。

量を制限し、リストを「展開」して残りのリストを表示する方法はありますか?

ありがとう。

Answer 1

多くの変更を加えてフィドルを更新しました。説明についてはコメントを参照してください。主なポイントは

1. どこでもクラスを追加
2. <li>最後に「もっと見る」を追加
3. 各<ul>(指定されたクラスの質問) をループし、次に<li>(指定されたクラスqn ) をループしてセットアップします
4. 使用されたイベント リスナー

すべてネイティブ JavaScript で実行されます (jQuery は必要ありません)。JavaScript の主な部分は次のとおりです。

window.addEventListener('load',function load(){
    var n_shown_at_start = 3,
        n_more_displayed_on_click = 3;

    var qs = document.querySelectorAll('.questions'),
        qn, sm, i = qs.length, j;
    while( --i >= 0 ){ // loop over all questions
        sm = qs[i].querySelector('.see_more'); // get see more entry
        qn = qs[i].querySelectorAll('.qn'); // get question <li>s
        j = qn.length;
        while( --j >= 0 ){
            qn[j]
                .querySelector('.qn_vis') // <a>
                .addEventListener('click', function click(){ // make click display question
                qn_toggle(this);
                return false; // no action
            }, true);
            if(sm) // if there is a see more button, hide some questions
                qn[j].style.display = (j < n_shown_at_start ? '' : 'none');
        }
        if(sm){ // if there is a see more button, set it up
            sm.qs = qs[i];
            sm.start = n_shown_at_start;
            sm.lim = n_more_displayed_on_click;
            sm.addEventListener('click', function click(){
                var qn = this.qs.getElementsByClassName('qn'), q,
                    i = this.start, j = i + this.lim;
                this.start = j + 1;
                while(i < j && (q = qn[i++])){ // loop over questions
                    q.style.display = 'block';
                }
                if(!q || !qn[i]){ // if we reached the end
                    this.textContent = 'No More';
                }
            }, false);
        }
    }
}, false);

Answer 2

これで問題は解決しますか？

余分なものを非表示のDIVにラップし、[すべて表示]ボタンがクリックされたときに表示します

http://jsfiddle.net/vAZFv/2/

HTML：

<ul>
    <li>
        <a href="#" onclick="toggle2('question', this);">Question</a>
        <div id="question" style="display:none; margin:0px;">
            <input type="text" />
        </div>
    </li>
    <li>
        <a href="#" onclick="toggle2('question2', this);">Question</a>
        <div id="question2" style="display:none; margin:0px;">
            <input type="text" />
        </div>
    </li>
    <li>
        <a href="#" onclick="toggle2('question3', this);">Question</a>
        <div id="question3" style="display:none; margin:0px;">
            <input type="text" />
        </div>
    </li>
    <div  id="hiddenOnes">
          <li>
        <a href="#" onclick="toggle2('question3', this);">Question11</a>
        <div id="question3" style="display:none; margin:0px;">
            <input type="text" />
        </div>
    </li>
        <li>
        <a href="#" onclick="toggle2('question3', this);">Question11</a>
        <div id="question3" style="display:none; margin:0px;">
            <input type="text" />
        </div>
    </li>
        <li>
        <a href="#" onclick="toggle2('question3', this);">Question11</a>
        <div id="question3" style="display:none; margin:0px;">
            <input type="text" />
        </div>
    </li>

    </div>
</ul>
<input type="button" id="showAllBtn" value="Show all">​

JS：

function toggle2(id, link) {
    var e = document.getElementById(id);
    if (e.style.display == '') {
        e.style.display = 'none';
    } else {
        e.style.display = '';
    }
}
$(function() {
    $("#hiddenOnes").hide();
    $("#showAllBtn").click(function() {
        $("#hiddenOnes").show();
    });
});​

Answer 3

これは、あなたが求めるすべてを行う別のソリューションです。

JS フィドル: http://jsfiddle.net/erRCy/

HTML:

 <ul class="topnav">
    <li>Question</li>

    <li>Question</li>

    <li>Question</li>

    <li>Question11</li>

    <li>Question11</li>

    <li>Question11</li>

    <li>Question11</li>
</ul>
<input type="button" id="showAllBtn" value="Show all">

CSS:

.visible{
 display:block;   
}

.invisible{
 display:none;   
}

JS:

<script>
    // Make all LIs under the UL(with class=topnav) invisible
    $("ul.topnav > li").addClass('invisible');

    // when the button is clicked
    $("#showAllBtn").click(function() {
        var gITEMS_PER_SET = 2; // set the no of items you want to show per set
        //get next set of LIs which are invisible and make them visible
        $("ul.topnav > li.invisible").slice(0, gITEMS_PER_SET).removeClass('invisible').addClass('visible');

    });
    // simulate the button click to show the initial set when page loads
    $("#showAllBtn").click();​
<script>
​

Answer 4

次のようなことができます。

http://jsfiddle.net/vZnJb/3/

まず、div に対して既に行っているようにli追加して、すべてのを非表示にします。style="display:none;"次に、ボタンを押すかリンクをクリックした後、 を使用してすべてliのを繰り返し処理しdocument.getElementsByTagName("li");、一定量のこのスタイルを削除します。

JS コード:

var shown = 1;
var expand_per = 1;

function expand() {
    shown += expand_per;
    var allLists = document.getElementsByTagName("li");
    i = 0;
    while (i < shown) {
        if (allLists[i] === undefined) {
            break;
        }
        if (allLists[i].style.display == 'none') {
            allLists[i].style.display = '';
        }
        i++
    }
}​

編集: もちろん、実際の状況では、Sajjan Sarkar が述べたように、データベースからすべての質問を取得します。