摺疊很多部分

我想在頁面上有許多摺疊部分，目前我可以摺疊一個這樣的部分，但是如何獲得許多摺疊部分？我需要爲每個可摺疊部分編寫一個新功能嗎？正如我當前的代碼基於部分ID摺疊一個部分。摺疊很多部分

下面是一些代碼，基本上是我有：

<html> 
<body> 

Some text before 

<div id=tbl name=tbl style="overflow:hidden;display:none"> 
<table border=1> 
<tr><td>test</td></tr> 
<tr><td>test</td></tr> 
<tr><td>test</td></tr> 
</table> 
</div> 

some text after 

<script language="JavaScript" type="text/javascript"> 
<!-- 
function sizeTbl(h) { 
    var tbl = document.getElementById('tbl'); 
    tbl.style.display = h; 
} 
// --> 
</script> 
<br> 
<a href="javascript:sizeTbl('none')">Hide</a> 

<a href="javascript:sizeTbl('block')">Expand</a> 

</body> 
</html>

來源

2015-08-13 Jonathan Lin

將ID作爲參數傳遞給函數 –

更改尺寸功能是這樣的：

function sizeTbl(h, id) { 
    var tbl = document.getElementById(id); 
    tbl.style.display = h; 
}

，然後通過它，你想讓它部分的id控制當你調用它時，像這樣：

<a href="javascript:sizeTbl('none', 'tbl')">Hide</a> 

<a href="javascript:sizeTbl('block', 'tbl')">Expand</a>

來源

2015-08-13 19:15:24 StephenTG

即使你不真的瞭解任何jQuery，它在這個活動中使用它將會是你最大的興趣，因爲它非常簡單，專注於你想要做的事情。

下面是一個代碼示例，向您展示下面的單個表格，如果您希望爲多個表格執行相同的一般概念，您可以通過事件委派或通過爲每個新表格添加其他功能以及id如果你願意的話，你也可以用你的按鈕和表來工作1：1）有更復雜的概念可以更好地工作，但這是jQuery中最簡單的一步，我可以考慮讓你的腳溼潤因爲你還沒有使用它。

希望它有幫助！

/* 
 
function sizeTbl(h) { 
 
    var tbl = document.getElementById('tbl'); 
 
    tbl.style.display = h.val; 
 
}; 
 
*/ 
 

 
//instead of your code above you jQuery would look like this below: 
 
$(document).ready(function(){ 
 
\t $('#fadeButton').on("click", function(){ 
 
    \t \t $("#table2").fadeToggle(); 
 
\t }); 
 
}); 
 

 
/* If you read more into event delegation you can figure out the way to 
 
clearly define the tables and add triggers on buttons, mouseover events, click events etc, 
 
wherever and as often as you'd like. */ 
 

 
//This focuses on the jQuery fadeToggle function, link below: 
 
//https://api.jquery.com/fadeToggle/

#table2 { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- 
 
withing the head of your html pages add as below: 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 
this will bring in jQuery from the CDN--> 
 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
<p> 
 
    Some text before 
 
</p> 
 

 
<div id="table2"> 
 
    <table> 
 
     <tr><td>test</td></tr> 
 
     <tr><td>test</td></tr> 
 
     <tr><td>test</td></tr> 
 
    </table> 
 
</div> 
 

 
<p> 
 
some text after 
 
</p> 
 
<br> 
 
    <button id="fadeButton">fader</button>

我增加了CDN鏈接，並在代碼中的一些鏈接，您可以用它來看看效果或更好地理解。 :)

來源

2015-08-13 19:46:46

鑑於它似乎並不像用戶當前正在使用jQuery，我不確定是否真的有必要包含一個框架來簡化此函數，這已經相當公平直截了當的 – StephenTG

這很有趣，所有的，但基本上StephenTG說保持簡單很好，這個代碼並沒有真正解決我的多個可摺疊部分的問題，除非我錯過了它。我知道一些jquery只是略微熟悉淡入淡出的開關 –

我同意@StephenTG關於不需要額外的框架，如果你還沒有問。考慮到這一點，你可以轉到以下link，在那裏你可以將我給你的所有jQuery代碼與vanilla JS聯繫起來。 :)

然而，爲了確切的過程，我會建議在jQuery中學習最基本的「fadeToggle」命令。它可能需要一整天的時間才能學習和交互，但它是非常可擴展的，因爲你在香草JS中編寫的代碼不是。

「我想有一個頁面上的許多倒塌的部分，在現階段，我可以摺疊一款這樣的，但我怎麼會有許多倒塌的部分 - jQuery是速度最快的，和最簡單的流程，以節省大量的手動編碼和多餘的打字，以及一些動畫中的胡椒粉。 - 我需要爲每個可摺疊部分編寫一個新函數嗎？ - 兩種語言都可以讓你用1個函數來完成這個任務，jQuery爲您提供了更多可擴展的方法我當前的代碼根據section ID摺疊了一段 - jQuery可以使用id，類，元素名稱，對象，跳到父對象或子對象，引用最近的兄弟，或者查找樹。非常適合你的要求再次，根據你使用的代碼中的確切響應，我會說它可以在比jQuery更多的代碼中完成。
- 另外，如果您要查看實際的jQuery（未定義的），您可以參考我提到的函數，並讀取vanilla JS代碼以及。

來源

2015-08-13 20:29:32

$(document).ready(function(){ 
 
    \t $('.fadeButton').on("click", function(){ 
 
     \t \t $(this).closest("div").find("table").fadeToggle(); 
 
     }); 
 
    });d

table { 
 
    display: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
 

 
    <p> 
 
     Some text before 
 
    </p> 
 

 
    <div id="table2"> 
 
     <button class="fadeButton">fader</button> 
 
     <table class="table"> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="table3"> 
 
     <button class="fadeButton">fader</button> 
 
     <p>inbetween some more text if you'd like?</p> 
 
     <table class="table"> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="table4"> 
 
     <button class="fadeButton">fader</button> 
 
     <table class="table"> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="table5"> 
 
     <button class="fadeButton">fader</button> 
 
     <p>inbetween some more text if you'd like?</p> 
 
     <h2>And some big words before</h2> 
 
     <table class="table"> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
      <tr><td>test</td></tr> 
 
     </table> 
 
     <h2>or more after</h2> 
 
    </div> 
 

 
    <div id="table6"> 
 
     <button class="fadeButton">fader</button> 
 
      <div> you could class this is a modal if you'd like 
 
      <table class="table"> 
 
       <tr><td>test</td></tr> 
 
       <tr><td>test</td></tr> 
 
       <tr><td>test</td></tr> 
 
      </table> 
 
      <button> Even add buttons in your modals or whatever! </button> 
 
      </div> 
 
    </div> 
 

 
    <p> 
 
    some text after 
 
    </p> 
 

 
    <p> Now isn't that easier for 6 columns, and it's got some nesting flexibility too!</br> 
 
     I actually am trying to make it as easy as possible for you. I've been in the "just </br> 
 
     get it done easier" but this function will handle as many </br> 
 
     elements as you need! ;) 
 
    </p>

來源

2015-08-14 15:58:47

function sizeTbl(h, id) { 
 
    var tbl = document.getElementById(id); 
 
    tbl.style.display = h; 
 
}

.checkStyleSheet{ 
 
    font-size: 20px; 
 
    font-weight: strong; 
 
    background-color: black; 
 
    color: white; 
 
    /*You can make your style by section if you find jQuery too hard, or just not 
 
    pertinent to learn at the moment and you are forced to use PureJS and id each 
 
    element on an individual basis.*/ 
 

 
} 
 

 
.firstGroup table{ 
 
    color: red; 
 
}

<head> 
 
<title>Pure JS - No jQuery</title> 
 
</head> 
 

 
<body> 
 
<div> 
 
for tbl 
 
<a href="javascript:sizeTbl('none', 'tbl')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<div id="tbl" name="tbl" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</table> 
 
</div> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 

 
<div> 
 
for tbl2 
 
<a href="javascript:sizeTbl('none', 'tbl2')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl2')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<p> Still fine with nesting </p> 
 
<div> 
 
<div id="tbl2" name="tbl2" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</table> 
 
</div> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 
</div> 
 

 
<!-- Here, we style a group with red --> 
 
<section class="firstGroup"> 
 

 
    <div> 
 
for tbl3 - RED 
 
<a href="javascript:sizeTbl('none', 'tbl3')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl3')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<div id="tbl3" name="tbl3" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</table> 
 
</div> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 

 
<div> 
 
for tbl4 - RED 
 
<a href="javascript:sizeTbl('none', 'tbl4')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl4')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<div id="tbl4" name="tbl4" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</table> 
 
</div> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 

 
<div> 
 
for tbl5 - RED 
 
<a href="javascript:sizeTbl('none', 'tbl5')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl5')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<div id="tbl5" name="tbl5" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</table> 
 
</div> 
 
    
 
</section> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 

 
<div> 
 
for tbl6 
 
<a href="javascript:sizeTbl('none', 'tbl6')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl6')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<div id="tbl6" name="tbl6" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
<tr><td>test</td></tr> 
 
</table> 
 
</div> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 
<!-- Note, that this solution is fine, and you can place your anchor tags anywhere. 
 
    the same capabilty exists to find the table regardless of nesting however, you 
 
    must ID every individual table, and therefore provide individual CSS for each. 
 
    if you were to change your tables and your JS calls from your anchors to class 
 
    based styling, then you would "show" or "hide" ALL tables from any anchor click 
 
    of expand/hide. You could probably solve that with classing your actual tables 
 
    elements, and handle individual styling by id if necessary. You could also create 
 
    a "section" tag in html to class groups of tables (or as you're calling them columns?) 
 

 
    If you do truly mean "columns" and you want to know how to have 1 table, with mult. 
 
    columns you can selectively Hide/Show that's slightly different. See below: 
 
     
 
--> 
 

 

 
<section class="checkStyleSheet"> 
 
    <!-- Notice the "section tag, which you can use to style groups of tables with individual id's if necessary --> 
 
<div> 
 
for tbl7 
 
<a href="javascript:sizeTbl('none', 'tbl7')">Hide</a> 
 
<a href="javascript:sizeTbl('block', 'tbl7')">Expand</a> 
 
<p> 
 
Some text before 
 
</p> 
 
<div id="tbl7" name="tbl7" columns="3" style="overflow:hidden;display:none"> 
 
<table border="1"> 
 
<tr> 
 
    <td><a href="javascript: alert('JS to hide col');">H :</a><a href="javascript: alert('JS to show col');"> S</a></td> 
 
    <td><a href="javascript: alert('JS to hide col');">H :</a><a href="javascript: alert('JS to show col');"> S</a></td> 
 
    <td><a href="javascript: alert('JS to hide col');">H :</a><a href="javascript: alert('JS to show col');"> S</a></td> 
 
</tr> 
 
<tr><td>test</td><td>test</td><td>test</td></tr> 
 
<tr><td>test</td><td>test</td><td>test</td></tr> 
 
<tr><td>test</td><td>test</td><td>test</td></tr> 
 
</table> 
 
</div> 
 
<p> 
 
some text after 
 
</p> 
 
</div> 
 

 
</section>

希望這有助於你和你的純JS的解決方案。 :)請記住，您擁有的部分/列越多，您的代碼將越難分解並且難以維護。如果你想學習如何顯示刪除列讓我知道，我也可以告訴你。您只需要在表格中獲取元素的數組位置，然後在父表格中創建一個for循環，該循環會進入每個後續的tr - （td）位置，並將樣式設置爲「none」或返回到「show」。一旦你看過一次或兩次，這並不是那麼複雜。快樂編碼！

來源

2015-08-14 16:44:08

摺疊很多部分

回答

相關問題