JQUERY - переключение разделов на основе идентификатора

#javascript #jquery #html

#javascript #jquery #HTML

Вопрос:

У меня на странице большое количество разделов. Каждый из них является контейнером для неупорядоченного списка. Над каждым DIV находится текст заголовка, который состоит из элемента с привязкой.

например

 <h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

Мне нужно, чтобы все эти разделы были скрыты до тех пор, пока не будет нажат заголовок (привязка). Если пользователь нажимает заголовок, он должен переключать отображение / скрытие DIV

Как я могу выполнить это в JQUERY таким образом, чтобы у меня была одна функция onClick для всех DIVS, возможно, используя id для различения divs?

 <h2><a href="#" onclick="toggleDiv(container1)"> Header 1 </a></h3>

function toggleDiv(id) {

}

но в JQUERY?

РЕШЕНО!!!!

 <script>
 $(function(){
  $('.toggle-link').on('click', function() {
   var linkId = $(this).attr('data-div-id');
$('#'   linkId).toggle();
 });
});
</script>

<h2><a href="#" class="toggle-link" data-div-id="div1"> Header 1 </a></h2>
<div id="div1">
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

<h2><a href="#" class="toggle-link" data-div-id="div2"> Header 2 </a></h2>
<div id="div2">
 <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
</div>

Ответ №1:

Вы можете использовать .toggle() в jQuery

метод toggle() переключает между hide () и show() для выбранных элементов.

 function toggleDiv(id) {
  $('#' id).toggle();   
}

где id — это параметр, который вы передаете