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>

现在，正在产生很多问题，我需要保留一个受限列表，当单击或自动（例如谷歌图像或推特）时，该列表可以与其余 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 中，并在单击 Show All 按钮时显示它

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

你可以这样做：

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

首先，通过添加像您已经为您的 div 所做的那样添加来隐藏所有li's 。style="display:none;"然后，在按下按钮或单击链接后，您遍历所有li's 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 所提到的。

Answer 4

这是另一种解决方案，可以满足您的要求。

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