Question

我有一个Rails应用，正在遍历一些db值：

<ul>
  <% @categories.each do |category| %>
    <li onclick="showHide(event)"> <%= category.name %>
      <% unless category.children.empty? %>
        <ul class="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>

并且使用以下JavaScript，当我单击它时，我可以显示和隐藏div：

function showHide(e) {
  var categoryList = e.currentTarget.querySelector(".categories");
  categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"
}

这确实有效，但是我需要为此再实现两件事。 1.当我单击一个类别而另一个类别打开时，我想关闭另一个类别。 2.即使刷新页面后，我也想找出一种方法来记住最后一个目标（打开的最后一个div）。

关于如何同时实现上述两项的任何想法？

更新1

好吧，我跟着@Panomosh告诉我，我有第一个上班了。在第二个cookie上不存在时，我创建了它，然后在浏览器控制台中给了我这个错误：

TypeError: undefined is not an object (evaluating 'categoryList.currentTarget.querySelector')

有什么想法吗？

function getCookie(c_name) {
    var i, x, y, ARRcookies = document.cookie.split(";");
    for (i = 0; i < ARRcookies.length; i++) {
        x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
        y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
        x = x.replace(/^\s+|\s+$/g, "");
        if (x == c_name) {
            return unescape(y);
        }
    }
}

function showHide(e) {
    var divsToHide = document.getElementsByClassName("categories"); 
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].style.display = "none"; // depending on what you're doing
    }

    var myCookie = getCookie(".Cl");

    if (myCookie == null) {
        var categoryList = e.currentTarget.querySelector(".categories");
        setCookie(".Cl", categoryList)
        categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"

}
    else {
        var categoryList = getCookie(".Cl");
        categoryList.currentTarget.querySelector(".categories");
        categoryList.style.display = categoryList.style.display === "none" ? "block" : "none"
    }
}

function setCookie(c_name, value) {
    var now = new Date();
    var time = now.getTime();
    time += 300 * 1000;
    now.setTime(time);
    var c_value = escape(value) + ((time == null) ? "" : "; expires=" + now.toUTCString());
    document.cookie = c_name + "=" + c_value;
}

Rails：显示和隐藏div

0 个答案: