Javascript 正在尝试获取列表项的值和文本

我有多个包含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>

我使用此代码使此列表展开和折叠，是否会有冲突：

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");
   });
});

---

编辑：我想你们中的大多数人已经回答了我的问题，我的代码中还有其他东西阻止它运行。因此，一旦我缩小范围，我可能会发布另一个与此相关的问题。

您可以尝试此操作，这将获得您单击的此列表项，并显示该列表中的值和文本

$("li").click(function(){
    if(this.id != 'myList')
    {
        siteUrl =  $(this).attr('value');
        siteName = $(this).text();
        console.log(siteUrl);
        console.log(siteName);
    }

    else
    {
        siteUrl =  $(this).attr('value');
        siteName = $(this).clone().children().remove().end().text();
        console.log(siteUrl);
        console.log(siteName);
    }
    return false;
});

---

实际问题在于您的

html

。最好正确地验证它

1） 不正确的标签关闭

<li value="https://hosted.demo.ca" class="collapsed expanded">Sharepoint Demo Website</ul>
<li value="https://hosted.demo.ca/academic" class="collapsed active">Academic
...........

Sharepoint演示网站
学术性
...........

---

简而言之，您的问题是当单击

li

时，

$（此）

有两个上下文条目，这是因为

li

嵌套在另一个上下文条目中，您可以看到，如果您执行

console.log（$（此））

，那么解决方案就是添加一个事件阻止器：

事件.stopImmediatePropagation（）以阻止这种情况发生，代码如下：

 site = $('#expList');
  site.on('click','li',function(event){
  event.stopImmediatePropagation();
  siteUrl =  $(this).attr('value');
  siteName = $(this)[0].childNodes[0];
  console.log(siteUrl);
  console.log(siteName);
});

顺便说一下，就像@user1671639所说的，html结束标记中有一个问题，应该是：

    <ul id="expList" class="list">
      <li value="https://hosted.demo.ca" class="collapsed expanded">
        Sharepoint Demo Website
        <ul id='#internal' style="display: block;">
          <li value="https://hosted.demo.ca/academic" class="collapsed active">
            Academic
          </li>
          <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>
       </li>
     </ul>



Sharepoint演示网站


学术的

董事会会议
委员会
文件管理
项目管理



布鲁斯·韦恩的问题到底是什么？；）当我点击一个列表项时，什么都没有发生。你检查过浏览器的控制台吗？按F12，然后你会看到控制台。是的，没有显示任何内容。我放了一个警报，这样我就不会错过它，但它也不会运行。你能检查一下我在回答中给出的小提琴吗？我试过小提琴控制台返回这个错误：未捕获类型错误：对象[object object]的属性“alert”不是一个函数我删除了refreshsitelist（），因为这是导致错误的原因。但是siteUrl始终只返回顶级站点，siteName一次返回所有站点。根据代码，您要求提供单击的列表项的值。因此，它返回单击列表项的特定值。但您要求的是列表项中的文本，该列表项中显示了所有名称。因此，您将获取特定列表项的所有名称和值。如何获取单击的单个项的值和文本，而不是所有项。请检查更新的解决方案。这将分别获取列表项值和innerText。我将尝试这样做，但我没有复制HTML，可能是因为它太大了。但是，结束标记是正确的。如果需要的话，我可以发布一个包含整个html输出的JSFIDLE。我发布了一个包含更多信息的JSFIDLE，只需在这里签入它，单击名字“Demo”，您将获得所有列表项，而不仅仅是demo@Batman你又没抓住重点。检查我的答案。
    <ul id="expList" class="list">
      <li value="https://hosted.demo.ca" class="collapsed expanded">
        Sharepoint Demo Website
        <ul id='#internal' style="display: block;">
          <li value="https://hosted.demo.ca/academic" class="collapsed active">
            Academic
          </li>
          <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>
       </li>
     </ul>