了解jQuery Tree
我们来说说 jQuerytree这家伙，他是个大热门，用JavaScript就可以搞定各种图形水果树，还有拖曳功能哦～好使？像商品类别、公司管理这样要显示树状结构的地方，都能用上它。顺溜儿的感觉真的棒极了。可有时咱就是想把那些链接藏起来，别让用户瞎点，以免鸡飞狗跳。
别怕，去除 jQuery 树形结构中的节点 URL 不复杂的！这里给你两个小建议：用 CSS 和 JavaScript 就能轻松解决。首先，你只需给每个节点上的链接 a 标签 href 属性设成空就好；或者直接在 JavaScript 代码里找办法。利用 jQuery 树形结构里原有的方法，找到所有的 a 标签，要看下它的爸爸（父节点）有没有特殊的 class 名字，然后决定是把 URL 链接设为空，还是删掉 href 属性。
通过CSS样式去除
想去掉jQuery树中的网址链接？很简单，用CSS搞定！只需把所有的a标签选中，再让href属性变成空值就行。下面教你怎么做：
css
.tree a {
pointer-events: none;
cursor: default;
}
首先，咱们先给a标签加个pointer-events属性让它也变不可点，然后再把鼠标指针改回来，这样大伙就看不出来这链接是啥了喔。
$(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", "");
});
通过修改JavaScript代码去除
别怕，还有个法子可行：就是尽量删掉JavaScript里带网址的链接呗。听过那个牛气冲天的jQuery树没？里面的’each’函数能帮咱们仔细查看每个’a’标签哟。然后，要是找到设有特定类名（如’parent’）的父节点，咱们不妨动手处理下，比如添加些装饰啥的。具体咋操作？来看下面这段代码
“`javascript
每个你点的’.tree’里的链接，我都得处理。
要是上头哪个兄弟叫’parent_li’的话，就要……
$(this).attr(“href”,””);
} else {
$(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");
}
});
});
$(this).removeAttr(“href”);
}
});
这代码就是上上下下的找，看看有没个叫’parent_li’的类别，如果找着了，就把他们的链接都变成空的；要是找不着，那就在那里删掉所有相关的元素。
总结
如果你想清除 jQuery 树节点的网址？这个小技巧就能搞定！不论是用 CSS 偷偷藏起来，还是 JavaScript 稍作变形，都可以随心所欲地操作。特别是遇到网页信息超级丰富的情况，这样做不仅可以提升用户体验，还能让界面变得更流畅。赶紧试试，相信会给你解决 jQuery 树节点 URL 的困扰提供很大帮助哈。
评论0