Показать / скрыть div с помощью JavaScript

Question

У меня есть меню, которое должно отображать вложенные элементы, организованные в div при нажатии.

Я предоставляю ниже структуру HTML

function showOrHide() {
  if (window.innerWidth < 800) {

    var div = document.getElementById("links");
    if (div.style.display == "block") {
      div.style.display = "none";
    } else {
      div.style.display = "block";
    }
  }
}

<li>
  <div id="image" onclick="showOrHide()">
    <span>Test1</span>
  </div>
  <div id="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div id="image" onclick=" showOrHide()">
    <span>Test3</span>
  </div>
  <div id="links">
    <span>Test4</span>
  </div>
</li>

Я бы хотел, чтобы div id="links" отображался или скрывался, когда я нажимал на div id="image". У меня есть следующий javascript.

Проблема, с которой я сталкиваюсь, заключается в том, что javascript onclick показывает все элементы div id=links в меню, и я хотел бы, чтобы отображались только ссылки div рядом с изображением div. Пример, когда я нажимаю Test1, должен отображаться только Test2.

Answer 1

Идентификаторы элементов должны быть уникальными во всем документе.

Вы должны попытаться создать уникальный идентификатор для каждого деления.

function showOrHide(rowNum) 
{ if (window.innerWidth < 800) { 

    var div = document.getElementById("links_"+ rowNum);
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
}
}

<li>
<div id="image_1" onclick="showOrHide(1)">
<span>Test1
</span></div>
<div id="links_1">
<span >Test2</span>
</div></li>
<li>
<div id="image_2" onclick=" showOrHide(2)">
<span>Test3
</span></div>
<div id="links_2">
<span >Test4</span>
</div></li>

Answer 2

Вы не можете использовать один и тот же идентификатор много раз для одного и того же HTML. Атрибут Id уникален, но вы можете использовать класс. Вы можете использовать этот код, может быть, он вам поможет.

<li>
<div class="image" onclick="showOrHide(this)">
<span>Test1
</span></div>
<div class="links">
<span >Test2</span>
</div></li>
<li>
<div class="image" onclick=" showOrHide(this)">
<span>Test3
</span></div>
<div class="links">
<span >Test4</span>
</div></li>

function showOrHide(element) {
    if (window.innerWidth < 800) {

        var div = element.closet(".links");
        if (div.style.display == "block") {
            div.style.display = "none";
        } else {
            div.style.display = "block";
        }
    }
}

Answer 3

var elems = document.getElementsByClassName("links");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
  this.parentElement.getElementsByClassName('links')[0].classList.toggle('hidden');
}));

.hidden {
  display: none;
}

<li>
  <div class="links">
    <span>Test1 </span>
  </div>
  <div class="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div class="links">
    <span>Test3
</span></div>
  <div class="links">
    <span>Test4</span>
  </div>
</li>

Answer 4

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

<li>
    <div id="image" onclick="showOrHide('#links_1')">
        <span>Test1</span>
    </div>
    <div id="links_1">
        <span >Test2</span>
    </div> 
</li>
<li>
    <div id="image" onclick=" showOrHide('#links_2')">
        <span>Test3</span>
    </div>
    <div id="links_2">
        <span >Test4</span>
    </div>
</li>

И JS:

function showOrHide(divSelector) 
{ 
    var div = document.querySelector(divSelector);
    if (div.style.display == "none") 
    {
        div.style.display = "block";
    }
    else 
    {
        div.style.display = "none";
    }
}

Answer 5

Ваша главная проблема здесь в том, что элемент id должен быть уникальным для этого элемента. Другие элементы не могут иметь такой же id. Вместо этого вы можете пройти через элемент в свой метод showOrHide(), используя this, а затем получить следующий элемент, используя nextElementSibling. Это будет работать при условии, что ваша HTML структура соответствует:

function showOrHide(elem) {
  if (window.innerWidth < 800) {
    const div = elem.nextElementSibling;
    if (!div.style.display || div.style.display == "block") {
      div.style.display = "none";
    } else {
      div.style.display = "block";
    }
  }
}

<li>
  <div id="image" onclick="showOrHide(this)">
    <span>Test1</span>
  </div>
  <div class="links">
    <span>Test2</span>
  </div>
</li>
<li>
  <div id="image" onclick=" showOrHide(this)">
    <span>Test3</span>
  </div>
  <div class="links">
    <span>Test4</span>
  </div>
</li>

Answer 6

Измените идентификатор и структуру соответственно.

<li>
   <div id="image_1" onclick="showOrHide(1)">
      <span>Test1
      </span>
   </div>
   <div id="links_1">
      <span >Test2</span>
   </div>
</li>
<li>
   <div id="image_2" onclick=" showOrHide(2)">
      <span>Test3
      </span>
   </div>
   <div id="links_2">
      <span >Test4</span>
   </div>
</li>

JavaScript:

function showOrHide(rowNumber) 
{ if (window.innerWidth < 800) { 

    var div = document.getElementById("links_"+ rowNumber);
    if (div.style.display == "block") 
    {
        div.style.display = "none";
    }
    else 
    {
        div.style.display = "block";
    }
                               }
}