使用 jquery 扩展折叠树节点不起作用答案

【问题标题】：expand collapse using jquery for tree node not working使用 jquery 扩展折叠树节点不起作用
【发布时间】：2010-12-23 11:20:34
【问题描述】：

每当一个特定的孩子有多个孩子时，我都会在树中使用 jquery 制作树，我想给出切换效果。这意味着点击它时应该有一个加号图标并且减号图像应该会在点击减号树时出现，并且应该会出现加号图像。

如何开发此树节点的任何工作示例都会有所帮助

以这种方式我使用了你的功能

function createSpanImageNode(spnNew) {
    var spnImage = document.createElement("span");
    spnImage.id = spnNew + "_" + "spn1";
    $(spnImage).addClass('SpanPlus');
    spnImage.setAttribute('onclick', 'toogleNode("' + spnImage.id + '")');
    return spnImage;
}

function toogleNode(spnID) {
        debugger;
        var dv = $("#" + spnID).parents("div:first");
        var chkUl = $(dv).find('ul').length;
        if (chkUl > 0) {
            if ($("#" + spnID).hasClass('SpanPlus'))
                $("#" + spnID).removeClass('SpanPlus').addClass('SpanMinus');
            else
                $("#" + spnID).removeClass('SpanMinus').addClass('SpanPlus');
            $(dv).find('ul').animate({ height: 'toggle' });
        }
    }

它应该执行的两个操作是 1）删除带有跨度的类并添加带有减号的类。 2）它应该切换ul。

两个都不行？？？？

【问题讨论】：

这样的插件可以用吗？ jquery.bassistance.de/treeview/demo
@matt 我已经完成了，你能告诉我如何使用切换动画
@arnab 我无法使用它，因为我根据要求进行了自己的控制
请提供更多代码。这些函数是从哪里调用的？示例 html 也会很好。
你也有一个错误打印：toogleNode 而不是toggleNode，但你重复了两次，所以它应该不会有任何伤害。

标签： javascript asp.net-mvc jquery-plugins jquery

【解决方案1】：

http://api.jquery.com/toggle/

【讨论】：

//$(dv).find('ul').animate({ height: 'toggle', opacity: 'toggle' });而不是上面的行，我做了一个小改动，它对我有用 $(dv).find('ul').toggle();

【解决方案2】：

<script type="text/javascript">
$(document).ready(function () {

$('.navbar .dropdown-item').on('click', function (e) {
    var $el = $(this).children('.dropdown-toggle');
    var $parent = $el.offsetParent(".dropdown-menu");
    $(this).parent("li").toggleClass('open');

if (!$parent.parent().hasClass('navbar-nav')) {
    if ($parent.hasClass('show')) {
        $parent.removeClass('show');
        $el.next().removeClass('show');
        $el.next().css({"top": -999, "left": -999});
    } else {
        $parent.parent().find('.show').removeClass('show');
        $parent.addClass('show');
        $el.next().addClass('show');
        $el.next().css({"top": $el[0].offsetTop, "left": $parent.outerWidth() - 4});
    }
    e.preventDefault();
    e.stopPropagation();
}
});

$('.navbar .dropdown').on('hidden.bs.dropdown', function () {
    $(this).find('li.dropdown').removeClass('show open');
    $(this).find('ul.dropdown-menu').removeClass('show open');
});

});

你可以在这里找到完整的菜单

http://blog.adlivetech.com/how-to-make-vertical-menu-with-plus-minus-toggle/

【讨论】：