javascript - 在一个位置点击，在其他地方注册为点击

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