javascript - 如何在 TreeView 中激活父节点上的链接？

Question

我想在 TreeView 中激活父节点上的链接。到目前为止，我这样做:

<li><a href="beranda">A - Referensi Spasial</a> <!--this is parent node-->
    <ul>
        <li>Jaring Kerangka Referensi Geodesi</li>
        <li>Model Geoid
            <ul>
                <li><a href="kugi/detail_data_kugi">AB01010010</a></li>
                <li>AB01010020</li>
            </ul>
        </li>
        <li>Stasiun Pasang Surut</li>
    </ul>
</li>

当我单击父节点时，它只会展开子节点。我想要的是当我点击它时，它会打开我在 <a></a> 上设置的链接

这是我的 TreeView 的屏幕截图:

这是javascript代码:

    $.fn.extend({
        treed: function (o) {

        var openedClass = 'glyphicon-minus-sign';
        var closedClass = 'glyphicon-plus-sign';

        if (typeof o != 'undefined'){
            if (typeof o.openedClass != 'undefined'){
                openedClass = o.openedClass;
            }
            if (typeof o.closedClass != 'undefined'){
                closedClass = o.closedClass;
            }
        };

        //initialize each of the top levels
        var tree = $(this);
        tree.addClass("tree");
        tree.find('li').has("ul").each(function () {
            var branch = $(this); //li with children ul
            branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
            branch.addClass('branch');
            branch.on('click', function (e) {
                if (this == e.target) {
                    var icon = $(this).children('i:first');
                    icon.toggleClass(openedClass + " " + closedClass);
                    $(this).children().children().toggle();
                }
            })
            branch.children().children().toggle();
        });
        //fire event from the dynamically added icon
        tree.find('.branch .indicator').each(function(){
            $(this).on('click', function () {
                $(this).closest('li').click();
            });
        });
        //fire event to open branch if the li contains an anchor instead of text
        tree.find('.branch>a').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        //fire event to open branch if the li contains a button instead of text
        tree.find('.branch>button').each(function () {
            $(this).on('click', function (e) {
                $(this).closest('li').click();
                e.preventDefault();
            });
        });
        }
    });

    //Initialization of treeviews
    $('#tree1').treed();

那么，我该怎么做呢？谁能帮我？谢谢

Answer 1

如果我的理解是正确的，你是在问为什么你的链接似乎根本没有效果，点击它们只是伸展树(Splay Tree)，就好像它是普通文本一样？

在我看来，这仅仅是由于在这些链接上附加事件的代码，即评论下方的 block “如果 li 包含 anchor 而不是文本，则触发事件以打开分支” .

$(this).closest('li').click(); 指令在父“li”项目上生成一个新的点击事件。

e.preventDefault(); 指令阻止链接接收“点击”事件，因此它不会重定向页面/滚动到 anchor 。

所以结果就好像“点击”已经“跳转”了你的链接并被传递给父“li”，因此不是重定向而是伸展树(Splay Tree)。

您可以简单地删除该 block 以恢复链接的正常行为。但是，“click”事件仍会冒泡到父“li”元素，并伸展树(Splay Tree)。如果页面被重定向，这不是问题，但如果链接转到本地 anchor (同一页面)，则很明显。

为防止这种情况(但仍让链接执行其正常工作)，保留该 block 但将 2 条内部指令替换为 e.stopPropagation();。与 preventDefault() 相反，它让当前事件发生，但阻止事件冒泡(父元素不接收它)。

现在我不确定那个 block 的原因。它似乎更适合 anchor (它使用相同的“a”标签但具有“name”属性而不是“href”)。但是没有理由阻止 anchor 上的“点击”事件吗？