1

因此，我正在使用此处提供的可扩展列表（此处有演示），到目前为止，JavaScript 代码允许在单击紧接其前面的行时展开列表。我希望列表（只是一个，而不是全部）在其他地方（不在同一行，甚至不在同一行）被点击时展开。<mystyle>word</mystyle>div

这可以通过 JavaScript 或一些 CSS 操作实现吗？我不是专家，但我真的很想解决这个问题。

编辑1：这是我所拥有的主体的一个小型工作示例。加载的 JavaScript 与链接网站的“更新”部分完全一样，以及jquery-1.4.2.min.js.

<div style="width:350px">
<div id="listContainer"><ul id="expList">
<p align='center'>2011-06-28 - <a href="podcast.mp3"> Download</a> - <mystyle>Show/hide songs</mystyle>
<audio controls>
  <source src="podcast.mp3" type="audio/mpeg">
  Your browser does not support this audio format.
</audio>
<li>List of songs<ul>
        <li>Song 1</li>
        <li>Song 2</li>
        <li>Song 3</li>
        <li>Song 4</li>
        <li>Song 5</li>
        <li>Song 6</li>
</ul></li></p>
</ul></div></div>

基本上我希望能够点击<mystyle>Show/hide songs</mystyle>并点击注册<li>List of songs。

4

2 回答 2

1

尝试这样的事情：

$('mystyle').click(function() {
  var mystyle = this;
  $('li:contains(' + $(this)[0].firstChild.data + ')').filter(function() {
    return $(this)[0].firstChild.data === $(mystyle).text();
  }).trigger('click');
});

这会将点击功能附加到mystyle元素，获取mystyle元素内的文本并根据其中的文本过滤li's。然后触发他们的click事件。您必须确保li's 内的文本是唯一的，以避免出现不可预知的行为。最好使用id's 代替。从理论上讲，您不需要该:contains()位，但它可能会加快速度，因为它可以确保过滤器迭代较小的集合。

编辑

如果里面的文本与要触发事件<mystyle>的文本相同，则上述解决方案将起作用。由于在您的情况下并非如此，因此最好分配一些's 并使用它们来代替，它需要更少的代码和 DOM 迭代。liclickid

您的示例中的相关 HTML 摘录

<mystyle id="showhidesongs">Show/hide songs</mystyle>

<li id="listofsongs">List of songs
  <ul>
    <li>Song 1</li>
    <li>Song 2</li>
    <li>Song 3</li>
    <li>Song 4</li>
    <li>Song 5</li>
    <li>Song 6</li>
  </ul>
</li>

JavaScript

$('#showhidesongs').click(function() {
  $('#listofsongs').trigger('click');
});
于 2013-05-03T23:36:43.807 回答
0

您可以通过重写您链接的页面上的代码来构建它。以下是现有代码：

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

$(document).ready( function() {
  prepareList()
});

当您阅读本文时，您会看到被单击的子ul项li被隐藏或显示。如果你想改变它，你必须使用类似id的东西重写这个逻辑。您可以将 a 添加data-target="abc"到li，让 jQuery 代码读取该值并打开或关闭ul具有该值作为其id. 您必须确保所有父母也都已打开，否则您当然不会看到任何事情发生

于 2013-05-03T23:33:04.837 回答