我有一个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;
}