具有动态加载内容的可折叠列表

collapsible list with dynamically loaded content

本文关键字：可折叠 列表 动态 加载      更新时间：2023-09-26

我已经尝试了各种各样的列表，我发现在互联网上，但他们似乎没有一个正常工作。我认为这可能是因为列表的内容是动态加载的(使用JQuery ajax)。

在$(document).ready上，我加载列表并将html数据附加到div。

之后，我尝试使列表可折叠(列表是嵌套的，它是一个数据库的导航)。

我最好的尝试:

function loadNavigation() {
  var _url = "http://api.writeplace.nl/idofnavigation
	var credentials = btoa("username:password!");
  
  $.ajax({
    headers: {
    	"Authorization": "Basic " + credentials
  	},
    url: _url,
    success: function(data, text) {
    	//console.log(data);
    	$("#container").empty();
    	$("#container").append(data);
		$("#nav > li > ul ").addClass("verberg");
		$("#nav > li > ul > li > ul").addClass("verberg");
    }
  });
}
function loadPage(documentId) {
	
  if (!documentId) {
  	documentId = "document-id";
  }
  var _url = "http://api.writeplace.nl/=" +  documentId;
	var credentials = btoa("username:password!");
	
  
  $.ajax({
    headers: {
    	"Authorization": "Basic " + credentials
  	},
    url: _url,
    success: function(data, text) {
    	$("#tekst").empty();
    	$("#tekst").append(data);
    }
  });
}

	
function uitvouwen(){
function uitvouwen1(){
	$("#container").on("click", "#nav > li", function(){
		$(this).children().toggleClass("verberg");
		//console.log("khbvdkvbedkvbewdkvfjbwekbfwkdjbvkejdbv");
	});
}
function uitvouwen2(){
	$("#container").on("click", "#nav > li > ul > li", function(){
		$(this).children().toggleClass("verberg");
		//console.log("gffhgfhh");
		
	});
}
uitvouwen2();
uitvouwen1();
}

加载导航，最上面的ul id为nav。在document.ready上，我将hide类添加到#nav>li>ul和#nav>li>ul>li>ul中，因此li项默认设置为隐藏。然而，这个列表的问题是，如果你点击树中的链接或更深层次的li项目，它也会将其注册为上面级别的点击。

有办法解决这个问题吗?或者更好(更干净)的方式来制作可折叠的嵌套列表和动态内容?

这是我如何做到这一点的一个例子。我用的是data-id。属性。这在为菜单分配功能时会派上用场。你可以使用id向下或向上移动。它通过查找包含data-attribute的祖先或自身来隐藏/显示UL。

$(document).ready(function() {
  $("#nav").html(loadnavigation(menu, null)); //to load the li items//
  $("#container").click(function(e){
    //e refers to the click event. 
    //bind it
    var eventTarget = $(e.target);
    //we need to use closest here. If you append other HTML-elements to the li, eventTarget
    //will refer to these elements. This way, it always travels up to the 
    //closest ancestor with an data-id attribute.
    eventTarget.closest("li[data-id]").children("ul").toggleClass("hide"); //find the closest ancestor (or self) that has data-id and hide its ul.
    
  });
});
//below is my own code just to show an example of my comment:
//I'm using a array, combined with objects to build the basic structure of the menu.
var menu = [{
  name: "list 1",
  menu: [{
    name: "sublist 1"
  }, {
    name: "sublist 2"
  }]
}, {
  name: "list 2",
  menu: [{
    name: "sublist 1",
    menu: [{
      name: "sublist 1"
    }, {
      name: "sublist 2"
    }]
  }, {
    name: "sublist 2"
  }]
}, {
  name: "list 3"
}];
function loadnavigation(obj, dataID) {
  var html = ""; //using var here is important. We want this variable to be private and within the scope of only this function.
  //this will be a recursive function.
  for (var i = 0; i < obj.length; i++) {
    var id = i;
    if (dataID != null || dataID != undefined) //we start the function at first with value null.
    {
      id = dataID + "-" + id; //separate id's from eachother with a dash   
    }
    var menuItem = '<li data-id="' + id + '">';
    menuItem += obj[i].name; //append the menu name with +=
    if (obj[i].menu) //obj has submenu
    {
      menuItem += "<ul class='hide'>" + loadnavigation(obj[i].menu, id) + "</ul>";
    }
    menuItem += "</li>"; //close
    html += menuItem;
  }
  return html;
}
ul.hide {
 display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul id="nav">
  </ul>
</div>

代码应该自己解释。

为什么我发现data-attribute方便:

$("li[data-id^='1-']")

上面的选择器将选择从id 1开始的树分支的所有子节点。

相关文章：