Складной список с динамически загружаемым содержимым

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 имеет идентификатор nav, На document.ready Я добавляю класс hide в #nav>li>ul а также #nav>li>ul>li>ul, Итак li элементы по умолчанию скрыты. Проблема с этим списком, однако, заключается в том, что если вы нажмете на ссылку или глубже li элемент в дереве, он регистрирует это также как щелчок на уровнях выше.

Есть ли способ это исправить? Или лучший (более чистый) способ создания складных вложенных списков с динамическим содержимым?

Answer 1

Это пример того, как я бы это сделал. Я использовал data-id, приписывать. Это может пригодиться при назначении функций меню. Вы всегда можете путешествовать вниз или вверх, используя идентификаторы. Скрывает / показывает 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-']")

Селектор выше выберет все дочерние элементы, которые являются частью ветви дерева, начиная с идентификатора 1.