如何将目标添加到 bootstrap 树视图中的视图项目

Question

在我的项目中，我使用了以下 treeview bootstrap 插件：https://github.com/jonmiles/bootstrap-treeview

但是树视图不支持生成的元素中的目标属性。

对于 'categories' 节点，href 属性的内容是“#”，对于列表组项目，内容是 URL.

我假设 javascript 我可以检测到树视图组件中的哪些链接具有“#”作为 href 属性的值，哪些没有。对于不该做的事，我必须向 a 元素添加一个目标属性。

直到现在我还没有准备好写一个可行的代码所以没有用在这里上传它。

有人解决过这个问题吗？

我在添加目标属性的页面中添加了以下脚本：

function addTarget(){
/*
function to add a target to the links in treeview
so they do not open in same page/view   
*/
    $('.treeview').find('a').each(function() {
        var href = $(this).attr('href');
        if(href != "#"){
            $(this).attr("target","_new");
        }
    });
}

最初这对于显示的节点来说工作正常，但是当我打开和关闭一个节点时，树视图被重新计算并且目标被默认删除。

Answer 1

您可以使用 javascript 阻止 link 打开，获取 url 并使用 javascript 在新选项卡中打开 link：

$('#treeviewFolder').on('click', 'a', function () {
    event.preventDefault();
    if ($(this).attr('href')) {
       window.open($(this).attr('href'), "_blank"); 
    }
});

如何将目标添加到 bootstrap 树视图中的视图项目

How to add a target to the view items in bootstrap treeview

treeview

jquery

twitter-bootstrap