Question

我想在树视图中激活父节点上的链接。到目前为止，我这样做：

<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>

上设置的链接

以下是我树视图的截图：

这是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

如果我的理解是正确的，你会问为什么你的链接似乎根本没有任何效果，点击它们只是将树扩展为正常文本？

在我看来，这仅仅是因为代码附加了这些链接上的事件，即下面的块注释“如果li包含锚而不是文本，则触发事件以打开分支”

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

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

结果就好像“点击”已“跳过”你的链接并被传递给父“li”，因此不会重定向，而是扩展树。

您可以简单地删除该块以恢复链接的正常行为。但是，“click”事件仍然会冒泡到父“li”元素，并展开树。如果页面被重定向，则不是问题，但如果链接转到本地锚点（同一页面），则会很明显。

为了防止这种情况（但仍然让链接正常工作），请保留该块，但用e.stopPropagation();替换2条内部指令。与preventDefault()相反，它允许当前事件发生，但它会停止事件冒泡（父元素不接收它）。

现在我不确定该阻止的原因。它似乎更适用于锚点（使用相同的“a”标签，但使用“name”属性而不是“href”）。但是没有理由阻止锚点上的“点击”事件？

如何在树视图中激活父节点上的链接？

1 个答案: