pokok jquery alih keluar url

Dalam pembangunan web yang lalu, terdapat peningkatan permintaan untuk menggunakan perpustakaan JavaScript. Antaranya, jQuery ialah perpustakaan JavaScript yang pantas dan ringkas yang dicipta oleh John Resig, yang merangkumi banyak fungsi yang biasa digunakan, seperti operasi DOM, pengendalian acara, permintaan AJAX, dll. Dalam pembangunan web, selalunya perlu untuk memaparkan dan mengendalikan data dalam struktur pokok Untuk keperluan ini, pokok jQuery ialah alat yang biasa digunakan.

Walau bagaimanapun, apabila menggunakan pepohon jQuery untuk paparan data, ramai pembangun bergelut dengan cara mengalih keluar pautan URL pada nod untuk mengelakkan salah guna pengguna. Artikel ini akan memperincikan cara melaksanakan ciri ini.

1. Fahami pepohon jQuery

Sebelum kita mula mengalih keluar pautan URL pada nod, kita perlu terlebih dahulu memahami struktur pepohon jQuery dan operasi asas yang berkaitan. Pepohon jQuery ialah perpustakaan JavaScript bahagian hadapan yang digunakan untuk memaparkan dan mengendalikan data berstruktur pepohon. Sebagai contoh, kita boleh menggunakan pepohon jQuery untuk memaparkan data berbentuk pepohon dalam senario seperti kategori produk, tahap struktur jabatan, dsb.

Secara amnya, apabila nod berada dalam keadaan dikembangkan, nod akan memaparkan pautan URL supaya pengguna boleh mengakses secara langsung kandungan yang diwakili oleh nod. Walau bagaimanapun, dalam beberapa projek sebenar, pembangun perlu menyembunyikan pautan URL ini untuk mengelakkan pengguna daripada mengklik pada nod secara tidak sengaja, menyebabkan halaman melompat dan menjejaskan pengalaman pengguna.

2. Kaedah untuk mengalih keluar pautan URL nod pokok jQuery

Apabila mengalih keluar pautan URL nod, kami boleh menggunakan dua kaedah berikut.

1. Pengalihan keluar melalui gaya CSS

Kami boleh menetapkan atribut href dalam semua teg (pautan) kepada rentetan kosong melalui tetapan gaya CSS, dengan itu mencapai tujuan menyembunyikan pautan URL nod. Kod pelaksanaan khusus adalah seperti berikut:

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

Dalam kod di atas, kami mengeluarkan semua teg pepohon jQuery dan menetapkan atribut hrefnya kepada rentetan kosong. Dengan cara ini, tujuan menyembunyikan pautan URL nod boleh dicapai.

2. Alih keluar

dengan mengubah suai kod JavaScript Dalam pelaksanaan lain, kami terus mengalih keluar pautan URL nod dalam kod JavaScript. Kod pelaksanaan khusus adalah seperti berikut:

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

Dalam kod di atas, kami menggunakan setiap kaedah pepohon jQuery untuk melintasi semua teg dan menentukan sama ada nod induk mempunyai kelas "parent_li". URL nod Ditetapkan kepada rentetan kosong. Jika tidak, keluarkan terus atribut href pada teg.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan cara mengalih keluar pautan URL nod dalam pepohon jQuery. Dalam dua cara berbeza, anda boleh menyembunyikan pautan URL nod mengikut keperluan sebenar. Terutamanya dalam beberapa aplikasi web yang kompleks, selalunya perlu untuk memaparkan struktur data pokok, dan operasi seperti menyembunyikan pautan URL boleh membantu pembangun meningkatkan pengalaman pengguna dan interaktiviti pengguna.

Atas ialah kandungan terperinci pokok jquery alih keluar url. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!