Question

I have a tree menu like shown below. I want to programmatically trigger a click event on a tree parent to expand the tree. Here "Dolor"-link is the tree parent node. (Also it has "+" sign prefixed).

How to trigger click event on the tree parent node?

<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，否则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

Answer 2

点击toggle()

后，您可ul .parent

＆＃13;

$('li.parent').click(function() {
  $(this).find('ul').toggle();
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

＆＃13;

对于嵌套的ul，你可以这样做

＆＃13;

$('.open').click(function() {
  $(this).next('ul').slideToggle();
})

＆＃13;

li ul {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="parent item-8 closed"><a class="open" href="#"><strong>Open here</strong></a>
  <ul>
    <li class="item-9"><a href="#">Lorem</a></li>
    <li class="item-10"><a class='open' href="#"><strong>Open here</strong></a>
      <ul>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
      </ul>
    </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>

＆＃13;

使用<a> tag

2 个答案: