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

Question

我尝试了在 Internet 上找到的各种列表，但其中 none 似乎可以正常工作。我认为这样做的原因可能是列表的内容是动态加载的（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 上，我将 class hide 添加到 #nav>li>ul 和 #nav>li>ul>li>ul，因此 li 项默认设置为隐藏。然而，此列表的问题在于，如果您单击树中的 link 或更深的 li 项目，它也会将其注册为对上方级别的单击。

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

Answer 1

这是我将如何执行此操作的示例。我使用了 data-id。属性。这在为菜单分配功能时会派上用场。您始终可以使用 ID 向下或向上移动。它 hides/shows UL 通过找到包含 data-attribute.

的祖先或自身

$(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-']")

select 或更高版本将 select 所有 children 从 id 1 开始的树分支的一部分。

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

collapsible list with dynamically loaded content

javascript

ajax

jquery

nested-lists

dynamic-content