javascript - リスト項目の値とテキストを取得しようとしています

Question

URL を含む値属性を持つ複数のリスト アイテムがあります。クリック イベントを含む内の各リスト項目の URL とテキストを取得しようとしています。リスト項目をクリックしても何も起こりません。

<ul id="expList" class="list">
<li value="https://hosted.demo.ca" class="collapsed expanded">Sharepoint Demo Website</ul>
<li value="https://hosted.demo.ca/academic" class="collapsed active">Academic
<ul style="display: none;"><li value="https://hosted.demo.ca/academic/bm">Board Meetings</li><li value="https://hosted.demo.ca/academic/cmtte">Committee</li>
<li value="https://hosted.demo.ca/academic/dm">Document Management</li>
<li value="https://hosted.demo.ca/academic/pm">Project Management</li>
</ul>

http://jsfiddle.net/6yXV6/に役立つ場合は、完全な HTML を含む JsFiddle

私のコード:

site = $('#expList');
site.on('click','li',function(){
  siteUrl =  $(this).attr('value');
  siteName = $(this).text();
  console.log(siteUrl);
  console.log(siteName);
  RefreshSiteLists();
});

このコードを使用して、このリストを展開したり折りたたんだりしましたが、何らかの形で競合している可能性があります:

function prepareList() {
  $('#expList').find('li:has(ul)')
    .click( function(event) {
      if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');
      }
      return false;
    })
    .addClass('collapsed').children('ul').hide();

        //Create the button functionality
    $('#expandList').unbind('click').click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    });
    $('#collapseList').unbind('click').click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    });
  };

$(function() {
   $("#expList li").click(function() {
      // remove classes from all
      $("li").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

編集: ほとんどの人が私の質問に答えていると思いますが、コードの実行を妨げている何かがコードにあると思います。したがって、それを絞り込んだら、おそらくそれに関連する別の質問を投稿します。