使用<a>标记在树节点上以编程方式触发单击事件

Question

我有一个如下所示的树状菜单.我想以编程方式触发树父级上的单击事件以展开树.这里"Dolor"-link是树父节点.(它还带有"+"符号前缀).

如何在树父节点上触发click事件？

<li class="parent item-8 closed">
    <a href="#">Dolor</a>
    <ul style="display: none;">
        <li class="item-9"><a href="#">Lorem</a></li>
        <li class="item-10"><a href="#">Ipsum</a></li>
        <li class="item-11"><a href="#">Dolor</a></li>
        <li class="item-12"><a href="#">Sit</a></li>
        <li class="item-13"><a href="#">Amet</a></li>
    </ul>
</li>

Answer 1

插件的树节点单击事件正在处理鼠标指针的位置,以仅限制展开/折叠图标上的单击事件.因此,以编程方式触发click事件不起作用.为了实现这一点,我在插件js文件(jquery.ntm.js)中做了一点改动.

我在事件中添加|| !e.hasOwnProperty('originalEvent')了if条件$('.' + options.parentClass + ' > a', this).click().e.hasOwnProperty('originalEvent')返回true如果该事件由用户interarction解雇,否则false.

完整点击事件将如下所示.

$('.' + options.parentClass + ' > a', this).click(function (e) {
    var posX = $(this).offset().left;
    var posY = $(this).offset().top;

    var clickX = e.pageX - posX;
    var clickY = e.pageY - posY;

    if (clickX <= options.spoilerButtonClickMaxX && clickX >= options.spoilerButtonClickMinX && clickY <= options.spoilerButtonClickMaxY && clickY >= options.spoilerButtonClickMinY || !e.hasOwnProperty('originalEvent')) {
        var item = $(this).parent('li');
        var content = $(this).parent('li').children('ul');

        item.toggleClass(options.expandClass).toggleClass(options.collapseClass);

        if (options.slideEffect) {
            content.slideToggle();
        } else {
            content.toggle();
        }

        e.preventDefault();
    }
});

现在$('.parent > a').click();将完美地运作.

DEMO