Question

我已经尝试过我在互联网上找到的所有类型的列表，但它们似乎都没有正常工作。我认为这可能是因为列表的内容是动态加载的（使用JQuery ajax）。

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

之后我尝试使列表可折叠（列表是嵌套的，它是数据库的导航）。

到目前为止我最好的尝试：

＆＃13;

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();



}

＆＃13;

导航已加载，最高ul的ID为nav。在document.ready我将课程hide添加到#nav>li>ul和#nav>li>ul>li>ul，因此li项目默认设置为隐藏。但是，此列表的问题在于，如果单击树中的链接或更深的li项，它也会将其注册为上面的级别。

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

Answer 1

这是我如何做到这一点的一个例子。我使用了moment.js。属性。将功能分配给菜单时，这可以派上用场。您可以随时使用ID向下或向上旅行。它通过查找包含data-id的祖先或其自身来隐藏/显示UL。

＆＃13;

data-attribute

＆＃13;

$(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;
}

＆＃13;

ul.hide {
 display: none;
}

＆＃13;

代码应该解释自己。

为什么我发现<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

上面的选择器将选择以id 1开头的树分支的所有子项。

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

1 个答案: