1

Решил покопаться с JS без использования jQuery. Простая задачка при наличии упомянутой библиотеки, но, все же.

Итак. Есть некий набор элементов с заголовком и содержимым. Я делаю список, основываясь на содержимом заголовка и вытаскивая ID из каждого блока. После формирования списка, скрываю все блоки и делаю простые табы. То есть, при нажатии на пункт списка, идет сравнение ID и открывается нужный блок.

Теперь вопросы:

  1. Как сделать так, чтоб при повторном нажатии на пункт списка, блок скрывался? Попытки записать эту строчку document.getElementById(filterName).style.display = 'block'; с условием результата не дают, почему-то, на повторное нажатие она не реагирует.
  2. Просто окинуть проф.взглядом, можно ли что-то записать более коротко и корректно, если что-то колхозно сделано.

var a = document.querySelectorAll('.filter-area > .element'),
  b = document.querySelectorAll('.filter-area > .element > h2'),
  c = '',
  d = document.getElementsByClassName('filter_list'),
  i;

for (i = 0; i < a.length; i++) {
  c += '<div class="fl-item" onclick="openFilter(event, \'' + a[i].id + '\')">' + b[i].innerHTML + '</div>';
  a[i].style.display = 'none';
}
window.filter_list.innerHTML = c;

function openFilter(evt, filterName) {
  for (i = 0; i < a.length; i++) {
    a[i].style.display = 'none';
  }
  for (i = 0; i < d.length; i++) {
    d[i].className = d[i].className.replace(' active', '');
  }
  document.getElementById(filterName).style.display = 'block';
  evt.currentTarget.className += ' active';
}
<div id="filter_list" class="filter_list"></div>
<div class="filter-area">
  <div class="element" id="e1"><h2>Title 1</h2><p>Dummy</p></div>
  <div class="element" id="e2"><h2>Title 2</h2><p>Text</p></div>
  <div class="element" id="e3"><h2>Title 3</h2><p>Here</p></div>
</div>

Спасибо за любые мысли)

1 ответ 1

1

var a = document.querySelectorAll('.filter-area > .element'),
  b = document.querySelectorAll('.filter-area > .element > h2'),
  c = '',
  d = document.getElementsByClassName('filter_list'),
  i;

for (i = 0; i < a.length; i++) {
  c += '<div class="fl-item" onclick="openFilter(event, \'' + a[i].id + '\')">' + b[i].innerHTML + '</div>';
  a[i].style.display = 'none';
}
window.filter_list.innerHTML = c;

function openFilter(evt, filterName) {
  var wasVisible = document.getElementById(filterName).style.display != 'none';
  for (i = 0; i < a.length; i++) {
    a[i].style.display = 'none';
  }
  for (i = 0; i < d.length; i++) {
    d[i].className = d[i].className.replace(' active', '');
  }
  document.getElementById(filterName).style.display = wasVisible? 'none' : 'block';
  evt.currentTarget.className += ' active';
}
<div id="filter_list" class="filter_list"></div>
<div class="filter-area">
  <div class="element" id="e1">
    <h2>Title 1</h2>
    <p>Dummy</p>
  </div>
  <div class="element" id="e2">
    <h2>Title 2</h2>
    <p>Text</p>
  </div>
  <div class="element" id="e3">
    <h2>Title 3</h2>
    <p>Here</p>
  </div>
</div>

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.