如何更改JQuery中的锚链接？

Question

我正在使用我在互联网上找到的THIS树（它不是我的），而且我对它非常满意。 生成节点如下：

<li> 
  <span><i class="icon-leaf"></i> 
    Name
  </span>
  <a href="">Goes somewhere</a>
</li>

使用Javascript：

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span').on('click', function (e) {
        var children = $(this).parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

每个节点都有一个图标，一个名称和一个链接。单击元素时，当前分支会展开或折叠。

我想更改它，以便图标展开/折叠分支，名称将是链接。最终结果应该是这样的：
  

我是html，css和javascript的新手，我不知道我需要对css / javascript做什么修改才能得到它，有人可以帮助我吗？

Answer 1

您的尝试无效，因为click事件处理程序已附加到整个span元素，该元素包含图标和链接。

要使其正常工作，您必须对javascript代码进行2次小修改：

• 使用此选择器将点击处理程序附加到i元素（包含图标）：.tree li.parent_li > span > i
• 调整对$(this)的引用以引用父span

所以整个javascript代码将成为：

$(function () {
    $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
    $('.tree li.parent_li > span > i').on('click', function (e) {
        var $this = $(this);
        var $span = $this.parent();
        var children = $span.parent('li.parent_li').find(' > ul > li');
        if (children.is(":visible")) {
            children.hide('fast');
            $span.attr('title', 'Expand this branch');
            $this.addClass('icon-plus-sign').removeClass('icon-minus-sign');
        } else {
            children.show('fast');
            $span.attr('title', 'Collapse this branch')
            $this.addClass('icon-minus-sign').removeClass('icon-plus-sign');
        }
        e.stopPropagation();
    });
});

$('.icon-plus-sign').parent().next().next().children('li').hide();