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

Question

我尝试了在互联网上找到的各种列表，但似乎都无法正常工作。我认为原因可能是列表的内容是动态加载的(使用 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 项目，它也会将其注册为对上面级别的单击。

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

Answer 1

这是我将如何执行此操作的示例。我使用了data-id。属性。当将功能分配给菜单时，这会派上用场。您始终可以使用 ids 向下或向上移动。它通过查找包含数据属性的祖先或自身来隐藏/显示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>

代码应该能够 self 解释。

为什么我觉得data-attribute很方便:

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

上面的选择器将选择属于以 id 1 开头的 Twig 的所有子项。