arbre jquery supprimer l'URL

Dans le passé, le développement Web a suscité une demande croissante pour l'utilisation de bibliothèques JavaScript. Parmi eux, jQuery est une bibliothèque JavaScript rapide et concise créée par John Resig, qui encapsule de nombreuses fonctions couramment utilisées, telles que les opérations DOM, la gestion des événements, les requêtes AJAX, etc. Dans le développement Web, il est souvent nécessaire d'afficher et d'exploiter les données dans une structure arborescente. Pour ce besoin, l'arborescence jQuery est un outil couramment utilisé.

Cependant, lors de l'utilisation de l'arborescence jQuery pour l'affichage des données, de nombreux développeurs ont du mal à savoir comment supprimer le lien URL sur le nœud pour éviter une mauvaise opération de l'utilisateur. Cet article détaillera comment implémenter cette fonctionnalité.

1. Comprendre l'arborescence jQuery

Avant de commencer à supprimer les liens URL sur les nœuds, nous devons d'abord comprendre la structure de l'arborescence jQuery et les opérations de base associées. jQuery Tree est une bibliothèque JavaScript frontale utilisée pour afficher et exploiter des données structurées en arborescence. Par exemple, nous pouvons utiliser l'arborescence jQuery pour afficher des données sous forme d'arborescence dans des scénarios tels que les catégories de produits, les niveaux de structure des départements, etc.

De manière générale, lorsqu'un nœud est à l'état développé, le nœud affichera un lien URL afin que les utilisateurs puissent accéder directement au contenu représenté par le nœud. Cependant, dans certains projets réels, les développeurs doivent masquer ce lien URL pour empêcher les utilisateurs de cliquer accidentellement sur le nœud, provoquant ainsi un saut de page et affectant l'expérience utilisateur.

2. Méthodes pour supprimer les liens URL des nœuds d'arborescence jQuery

Lors de la suppression des liens URL des nœuds, nous pouvons utiliser les deux méthodes suivantes.

1. Suppression via les styles CSS

Nous pouvons définir l'attribut href dans toutes les balises (liens) pour vider les chaînes via les paramètres de style CSS, obtenant ainsi des nœuds cachés. le lien URL. Le code d'implémentation spécifique est le suivant :

$(document).ready(function(){
  $(".tree li:has(ul)").addClass("parent_li");
  $(".tree li.parent_li > span").attr("title", "Collapse this branch");
  $(".tree li.parent_li > span").children("i:first-child").addClass("glyphicon-folder-open");
  $(".tree li.parent_li > span").children("i:first-child").removeClass("glyphicon-folder-close");

  $(".tree li.parent_li > span").on("click", function (e) {
    var children = $(this).parent("li.parent_li").find(" > ul > li");
    if (children.is(":visible")) {
        children.hide("fast");
        $(this).attr("title", "Expand this branch").children("i:first-child").addClass("glyphicon-folder-close").removeClass("glyphicon-folder-open");
    } else {
        children.show("fast");
        $(this).attr("title", "Collapse this branch").children("i:first-child").addClass("glyphicon-folder-open").removeClass("glyphicon-folder-close");
    }
    e.stopPropagation();
  });
  
  //将节点链接URL内容设置为空字符串
  $(".tree a").attr("href", "");
});

Dans le code ci-dessus, nous supprimons toutes les balises a de l'arborescence jQuery et définissons leurs attributs href sur des chaînes vides. De cette manière, l'objectif de masquer le lien URL du nœud peut être atteint.

2. Supprimez

en modifiant le code JavaScript. Dans une autre implémentation, nous supprimons directement le lien URL du nœud dans le code JavaScript. Le code d'implémentation spécifique est le suivant :

$(document).ready(function(){
  $(".tree li:has(ul)").addClass("parent_li");
  $(".tree li.parent_li > span").attr("title", "Collapse this branch");
  $(".tree li.parent_li > span").children("i:first-child").addClass("glyphicon-folder-open");
  $(".tree li.parent_li > span").children("i:first-child").removeClass("glyphicon-folder-close");

  $(".tree li.parent_li > span").on("click", function (e) {
    var children = $(this).parent("li.parent_li").find(" > ul > li");
    if (children.is(":visible")) {
        children.hide("fast");
        $(this).attr("title", "Expand this branch").children("i:first-child").addClass("glyphicon-folder-close").removeClass("glyphicon-folder-open");
    } else {
        children.show("fast");
        $(this).attr("title", "Collapse this branch").children("i:first-child").addClass("glyphicon-folder-open").removeClass("glyphicon-folder-close");
    }
    e.stopPropagation();
  });

  //将节点链接URL及其父级节点的URL都设置为空字符串
  $(".tree a").each(function(){
    var node=$(this).parent("li");
    if(node.hasClass("parent_li")){
      $(this).attr("href","javascript:void(0);");
    } else{
      $(this).removeAttr("href");
    }
  });
});

Dans le code ci-dessus, nous utilisons la méthode each de l'arborescence jQuery pour parcourir toutes les balises a et déterminer si le nœud parent a la classe "parent_li". , le nœud sera Le lien URL est défini sur une chaîne vide. Sinon, supprimez directement l'attribut href sur la balise.

3. Résumé

Dans cet article, nous avons présenté comment supprimer le lien URL du nœud dans l'arborescence jQuery. De deux manières différentes, vous pouvez masquer les liens URL des nœuds en fonction des besoins réels. En particulier dans certaines applications Web complexes, il est souvent nécessaire d'afficher des structures de données arborescentes, et des opérations telles que le masquage des liens URL peuvent aider les développeurs à améliorer l'expérience utilisateur et l'interactivité des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!