jQuery列表项和菜单的方法/函数

Question

我想清理一下我的代码…机制/算法就像我在另一篇文章中提出的问题一样。

列表项在点击链接或重新加载/刷新页面时保持打开

我不想一遍又一遍地重复自己的话。如果我在代码中添加更多的列表项和菜单。也许有人可以帮我用一个函数/方法来写更少的代码。

这是我的html:

<ul>
<li class="menu"><a href="#">Server</a></li>
<ul>
<li class="item">
<span>
<a href="#1">Start</a>
</span>
</li>
<li class="item">
<span>
<a href="#2">Security</a>
</span>
</li>
</ul>

<li class="menu"><a href="#">GIT</a></li>
<ul>
<li class="item">
<span>
<a href="#1">blub</a>
</span>
</li>
<li class="item">
<span>
<a href="#2">wurst</a>
</span>
</li>
</ul>
</ul>

我的jQuery代码:

$(document).ready(function () {

$(".item").hide();
$(".menu").click(function() {

localStorage.setItem('clickedItem', '.menu');
$(".item").hide();
$(this, ".item").show();
});    
});

这是一个JSFiddle:https://jsfiddle.net/ngy5mb4q/2/

我对函数/方法有点陌生，这就是为什么我需要一点帮助。也许有人能给我举个例子，这样我能更好地理解它。

Answer 1

首先我要指出，这不是创建嵌套列表的正确方法。参见

现在，您可以定义一个jQuery函数，比如createList(arr)来动态地创建一个列表。参数arr传递给包含要在列表中显示的文本的函数，即

arr = ["Server", "Start", "Security"]

其中arr[0]代表列表标题，其余为子列表的<li>元素。你可以在网页加载开始时调用这个函数来创建列表。

像这样:

$(document).ready(function() {
arr = ["Server", "Start", "Security"];
arr1 = ["GIT", "blub", "wurst"];
function createList(arr) {
var n = arr.length;
$("#masterList").append('<li class="menu"><a href="#">' + arr[0] + '</a></li>');
if (n > 1) {
var i = 1;
var li = $("#masterList").append('<li style="list-style:none"></li>').children('li:last-child');
var ul = li.append('<ul></ul>').children('ul:last-child');
while (i < n) {
ul.append('<li class="item"><span><a href="#1">' + arr[i] + '</a></span></li>');
i++;
}
}
}
createList(arr);
createList(arr1);
$(".item").hide();
$(".menu").click(function() {
//localStorage.setItem('clickedItem', '.menu');
$(".item").hide();
$(".item").show();
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<ul id="masterList">
</ul>

如果你想创建子列表，那么你可能想要考虑更好的东西，或者你仍然可以使用这个，但可能想尝试一些更好的方式来传递arr来指示哪个元素属于哪个级别，并使用递归。只是一个想法，传递另一个名为depth的数组，它具有arr数组中每个项目的深度。因此，使用jQuery在DOM中适当地添加它。更简单的版本如上图所示。