Question

我目前对以下链接有类似的设置：

有问题的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已经在其中扩展了隐藏内容。

现在，正在生成很多问题，我需要保留一个限制列表，可以在点击或自动（谷歌图片或推特）时与其他div一起扩展。

我有什么方法可以限制金额，并“扩展”列表以显示列表的其余部分吗？

感谢。

Answer 1

更新了fiddle并进行了大量更改，请参阅注解说明。要点是

到处添加课程
在最后添加了“查看更多”<li>
循环播放每个<ul>（给定的课程问题），然后<li>（给定课程 qn ）进行设置
使用过的事件监听器

这一切都是在原生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

你可以这样做：

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

首先，通过添加li来隐藏所有style="display:none;"，就像你已经为你的div做的那样。然后，在按下按钮或点击链接后，您使用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所述。

Answer 4

这是另一种能满足你要求的解决方案。

JS FIDDLE： 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>

用隐藏内容扩展li的列表

4 个答案: