擴大李時珍的列表隱藏內容

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已有擴大其中隱藏的內容。

現在，很多問題正在生成，我在一個點，我需要保留一個限制列表，可以擴大與其餘的divs點擊或自動（拉谷歌圖片或微博）。

是否有任何方法可以限制金額，並「展開」列表以顯示其餘列表？

謝謝。

Answer 1

更新fiddle有很多變化，請參閱註釋的解釋。要點是

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

你可以做這樣的事情：

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

首先，通過增加style="display:none;"像你已經爲你的div做隱藏所有li的。然後，在按下一個按鈕或點擊一個鏈接後，您可以用document.getElementsByTagName("li");遍歷所有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薩卡提及。

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