折叠许多部分

时间：2015-08-13 19:06:53

标签： javascript html

我想在页面上有很多折叠部分，目前我可以像这样折叠一个部分，但我怎么会有很多折叠部分？我是否必须为每个可折叠部分编写一个新功能？由于我当前的代码根据部分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>

5 个答案:

答案 0 :(得分：1)

将您的大小调整功能更改为：

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>

答案 1 :(得分：0)

即使你真的不知道任何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(){
	$('#fadeButton').on("click", function(){
   		$("#table2").fadeToggle(); 
	});
});

/* 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链接和代码中的一些链接，您可以使用这些链接查看其中的操作或更好地理解。 ：）

答案 2 :(得分：0)

我同意@StephenTG，如果你没有问过，不一定需要一个额外的框架。考虑到这一点，你可以转到下面的link，在那里你可以将我给你的所有jQuery代码与vanilla JS联系起来。 ：）

但是，对于你的确切过程，我建议学习最基本的命令＆＃34; fadeToggle＆＃34;在jQuery中。这可能需要一天时间来学习和交互，但它是非常可扩展的，因为你在vanilla JS中编写的代码不是。

＆＃34;我想在一个页面上有很多折叠部分，目前我可以折叠像这样的一个部分，但是我怎么会有很多折叠部分呢？   - jQuery是您保存大量手动编码和冗余打字的最快，最简单的过程，也是一些动画中的胡椒。   - 我是否必须为每个可折叠部分编写新功能？ - 任何一种语言都允许你使用1个函数执行此操作，jQuery为您提供了更多可扩展的方法。 我当前的代码根据部分ID折叠了一个部分。 - jQuery可以使用id，类，元素名称，对象，跳转到父对象或子对象，以及最近的引用兄弟，或者查找树。它非常适合你所要求的。但同样，根据您使用的代码中的确切响应，我会说它可以用比jQuery更多的代码来完成。
  - 另外，如果你要查看实际的jQuery（未经通知），你可以    引用我提到的函数，并读出vanilla JS代码    同样。

答案 3 :(得分：0)

    $(document).ready(function(){
    	$('.fadeButton').on("click", function(){
       		$(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>

答案 4 :(得分：0)

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>

希望这可以帮助您使用Pure JS解决方案。 :)请记住，您拥有的部分/列越多，您的代码就会越碎片化并变得难以维护。如果你想学习如何显示 - 删除列让我知道，我也可以告诉你。您只需要在表中获取元素的数组位置，然后在父表上创建一个for循环，该循环进入后面的每个tr - （td）位置，并将样式设置为“none”或返回“show”。一旦你看过一次或两次，它就不复杂了。快乐的编码！

相关问题
最新问题