Цикл Rails: Показать и скрыть элемент по id

Question

Я перебираю категории и подкатегории со следующим кодом "

<ul>
  <% @categories.each do |category| %>
    <li onclick="showHide()"> <%= category.name %>
      <% unless category.children.empty? %>
        <ul id="categories" style="display:none;">
          <% category.children.each do |subcategory| %>
            <li><%=  link_to "#{subcategory.name}", search_path(:search => subcategory.id) %></li>
          <% end %>
        </ul>
     <% end %>
    </li>
  <% end %>
</ul>

И я хочу нажать на каждую категорию, и тогда появятся подкатегории:

function showHide() {
    var x = document.getElementById("categories");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

Нопо какой-то причине, когда я нажимаю на какую-либо категорию, открывается первая, а не на конкретную, на которую я нажимаю. Есть идеи, как это исправить?

Answer 1

Ваша проблема ограничена: вы не предоставляете контекст для document.getElementById("categories");, то есть он просто выбирает первый элемент на странице с id 'категориями'.

Пока мы здесь, id должно быть уникальным для страницы, так что вам лучше переключать все визуализированные несколько раз, чтобы использовать class.

Чтобы использовать область действия события click, вы можете передать event вфункция, которую мы можем использовать, чтобы найти, какую li она переключает.

Итак, в вашем html:

<li onclick="showHide(event)">

И в вашей функции:

function showHide(e) {
    var parentCategory = e.currentTarget
    var categoryList = parentCategory.querySelector(".categories"); // << assuming you switch to using classes
    if(!categoryList) { return }
    if (categoryList.style.display === "none") {
        categoryList.style.display = "block";
    } else {
        categoryList.style.display = "none";
    }
}

Таким образом, вы ищете категории в нажатом li,и вы должны увидеть это переключение, как и ожидалось.

Вы также можете немного уменьшить его, используя троицу, если используете es6:

function showHide(e) {
    let categoryList = e.currentTarget.querySelector(".categories");
    if(!categoryList) { return }

    categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"
}

Дайте мне знать, как вы поживаете,Если у вас есть какие-либо вопросы.