Свернуть все разделы

Я хочу иметь много сворачивающихся разделов на странице, на данный момент я могу свернуть один раздел, как это, но как бы у меня было много развалившихся разделов? Должен ли я написать новую функцию для каждого складного раздела? Поскольку мой текущий код разрушает раздел, основанный на идентификаторе раздела.Свернуть все разделы

Вот код, который в основном то, что у меня есть:

<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

Передайте идентификатор в качестве параметра функции –

Измените функцию проклейки на что-то вроде:

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

, а затем передать его идентификатор раздела, который вы хотите его когда вы его вызываете, например:

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

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

источник

2015-08-13 19:15:24 StephenTG

Даже если вы действительно не знаете jQuery, это wo uld будет в ваших интересах использовать его в этом мероприятии, так как это очень просто и фокусируется на том, что вы хотите сделать.

Вот пример кода, показывающий вам отдельную таблицу ниже, если вы хотите выполнить одну и ту же общую концепцию для нескольких таблиц, вы можете сделать это путем делегирования событий или путем добавления другой функции для каждой новой таблицы и идентификатора «В этих таблицах вы также можете указывать свои кнопки и таблицы на работу 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 только немного знакомы с fade toggle thingy –

Я согласен с @StephenTG о том, что вам необязательно нужна дополнительная структура, если вы не спросили. Имея это в виду, вы можете вместо этого перейти к следующему link, где вы можете связать весь код jQuery, который я дал вам в vanilla JS. :)

Для вашего точного процесса, однако, я бы рекомендовал изучить самую основную команду «fadeToggle» в jQuery. Это может занять у вас день, чтобы учиться и взаимодействовать, но это очень расширяемо, поскольку код, который вы пишете в vanilla JS, не является.

«Я хочу иметь много рушатся разделов на странице, на данный момент я могу свернуть одну секцию, как это, , но как бы я много рушатся разделов - JQuery ваш самый быстрый и простой способ, чтобы сохранить тонны ручного кодирования и избыточного ввода, а также перец в некоторых анимациях. - Должен ли я писать новую функцию для каждого разборного раздела? - Любой язык позволит вам сделать это с помощью 1 функции, jQuery дает вам более расширяемые способы мой текущий код разрушает раздел, основанный на идентификаторе раздела. - jQuery может потреблять идентификаторы, классы, имена элементов, объекты, пропускать родительские или дочерние объекты и ссылаться на родных братьев, ближайших или находить с деревом. в значительной степени сделано для того, что вы просите. t снова, за точный ответ в коде, который вы используете, я бы сказал, что все это можно сделать гораздо больше кода, чем в jQuery.
- Кроме того, если бы вы посмотрели фактический jQuery (unminified), вы могли бы ссылаться на функции, о которых я упомянул, и зачитать код 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

Свернуть все разделы

ответ

Смежные вопросы