Question

所以我使用了展示here的可展开列表（带有演示here），到目前为止，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上注册。

Answer 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。然后触发他们的click事件。您必须确保li内的独特文字，以避免不可预测的行为。最好使用id代替。从理论上讲，你不需要:contains()位，但它可能会加快速度，因为它可以确保过滤器迭代一个较小的集合。

修改

如果<mystyle>中的文字与您要触发li事件的click内的文字相同，则上述解决方案可行。由于在您的情况下不是这样，因此最好分配一些id并使用它们，它需要更少的代码和DOM迭代。

您示例中的相关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'); });

Answer 2

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

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这样的东西重写这个逻辑。您可以向data-target="abc"添加li，让jQuery代码读取该值，然后打开或关闭具有该值ul的{{1}}。你必须确保所有的父母都被打开，否则你什么也看不到

单击一个位置，在其他位置注册单击

2 个答案: