如何更改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

您的嘗試不起作用，因爲點擊事件處理程序連接到整個span元素，該元素包含圖標和鏈接。

要使其工作，你必須使2次小修改的JavaScript代碼：使用這個選擇

• 附上點擊處理程序的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();