我决定使用 slicknav 为火灾报警事件系统的一系列记录构建一个动态导航系统。我在 Lotus domino 数据库中构建了这个系统，在这个数据库中，我有一个按年、月和日可扩展部分的动态系统。这是假设在我的应用程序中复制该导航。在查看了不同的插件后，我决定使用 slicknav。这就是我的挑战所在。我必须从文件记录中构建这个系统。这是我系统的基础。首先是我返回的 json 数据示例：
{"firedrills":
[
{"alarmyear":2018,
"alarmyearmonth":"2018-9",
"alarmyearmonthday":"2018-9-18",
"monthname":"September",
"alarmday":"18",
"alarmdatetime":"2018-09-18 00:15:00.000",
"inciNumber":"2018-599",
"incidentlocation":"FR2W"},
{"alarmyear":2018,
"alarmyearmonth":"2018-8",
"alarmyearmonthday":"2018-8-7",
"monthname":"August",
"alarmday":"7",
"alarmdatetime":"2018-08-07 19:08:00.000",
"inciNumber":"2018-537",
"incidentlocation":"Laundry"},
{"alarmyear":2018,
"alarmyearmonth":"2018-7",
"alarmyearmonthday":"2018-7-3",
"monthname":"July",
"alarmday":"3",
"alarmdatetime":"2018-07-03 08:15:00.000",
"inciNumber":"2018-464",
"incidentlocation":"FA5E"}
]}
这是我为静态测试而构建的 html 和 jquery 代码：
<div id="firedrillmainnavdiv">
<ul id="firedrillmainul"></ul>
</div>
<script type="text/javascript">
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul");
$firedrillmainul.empty();
$firedrillmainul.append(
$('<li>').prop({id:"2018"}).text("2018").append(
$('<ul>').prop({id:"2018-ul"}).append(
$('<li>').prop({id:"2018-9"}).text("September").append(
$('<ul>').prop({id:"2018-9-ul"}).append(
$('<li>').prop({id:"2018-9-18"}).text("18").append(
$('<ul>').prop({id:"2018-9-18-ul"}).append(
$('<li>').prop({id:"2018-599"}).append($('<a>').prop({href:"#"}).text("FR2W"))
)
)
)
)
).append(
$('<li>').prop({id:"2018-8"}).text("August").append(
$('<ul>').prop({id:"2018-8-ul"}).append(
$('<li>').prop({id:"2018-8-7"}).text("7").append(
$('<ul>').prop({id:"2018-8-7-ul"}).append(
$('<li>').prop({id:"2018-537"}).append($('<a>').prop({href:"#"}).text("Laundry"))
)
)
)
)
).append(
$('<li>').prop({id:"2018-7"}).text("July").append(
$('<ul>').prop({id:"2018-7-ul"}).append(
$('<li>').prop({id:"2018-7-3"}).text("3").append(
$('<ul>').prop({id:"2018-7-3-ul"}).append(
$('<li>').prop({id:"2018-464"}).append($('<a>').prop({href:"#"}).text("FA5E"))
)
)
)
)
)
)
)
$firedrillmainul.slicknav({
label: 'Fire Drills',
prependTo:'#firedrillmainnavdiv',
duplicate: false
});
})
})
</script>
这一切都没有问题。这是我为动态构建它而构建的代码。我正在使用 id 将数据附加到菜单的正确级别。通过代码的第一次迭代工作正常，但是我找不到将代码附加到以下迭代的 id。这是那个代码。我只展示了构建无序列表的逻辑。
$(function(){
$.ajax({
url:'../json/getfiredrills.php',
dataType: 'json'
}).done(function(data){
var $firedrillmainul=$("#firedrillmainul"),
alarmyear="";
$firedrillmainul.empty();
$.each(data.firedrills,function(key,value){
if (alarmyear==""){
$firedrillmainul.append(
$('<li>').prop({id:value.alarmyear}).text(value.alarmyear).append(
$('<ul>').prop({id:value.alarmyear+'-ul'}).append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+'-ul'}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+'-ul'}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
)
)
)
)
}else if($firedrillmainul.find("#"+value.alarmyearmonthday)){
$("#"+value.alarmyearmonthday+"-ul").append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
}else if($firedrillmainul.find("#"+value.alarmyearmonth)){
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
}else if($firedrillmainul.find("#"+value.alarmyear)){
$("#"+value.alarmyear+"-ul").append(
$('<li>').prop({id:value.alarmyearmonth}).text(value.monthname).append(
$('<ul>').prop({id:value.alarmyearmonth+"-ul"}).append(
$('<li>').prop({id:value.alarmyearmonthday}).text(value.alarmday).append(
$('<ul>').prop({id:value.alarmyearmonthday+"-ul"}).append(
$('<li>').append($('<a>').prop({href:""}).text(value.incidentlocation))
)
)
)
)
)
}
alarmyear=value.alarmyear;
})
})
})