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

Question

所以我使用了扩张列为呈现在这里 （用演示在这里 ），也是迄今为止的JavaScript代码允许列表时，立即行前就被点击进行扩展。 我希望列表（只是一个，不是全部）在其他地方（而不是在同一行，甚至是在同一div ）单击某行（或更确切地说，词，例如<mystyle>word</mystyle> ）时<mystyle>word</mystyle> 。

使用JavaScript或某些CSS操作可能吗？ 我不是专家，但我真的很想解决这个问题。

编辑1：这是我所拥有的身体的一个小例子。 加载的JavaScript与链接网站的“ Update”部分以及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');
});

这会将click函数附加到mystyle元素上，将文本放入mystyle元素内，并根据其中的文本过滤li 。 然后触发其click事件。 您必须确保li内的唯一文本，以避免不可预测的行为。 最好改用id 。 从理论上讲，您不需要:contains()位，但是它可以加快速度，因为它可以确保过滤器迭代较小的集合。

编辑

如果<mystyle>中的文本与要触发其click事件的li内部的文本相同，则上述解决方案将起作用。 由于在您的情况下情况并非如此，因此最好分配一些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()
});

阅读此内容时，您会看到单击的li的子ul被隐藏或显示。 如果要更改此设置，则必须使用id来重写此逻辑。 您可以向li添加data-target="abc" ，让jQuery代码读取该值，然后打开或关闭以该值作为其id的ul 。 您必须确保所有父母也都打开了，否则您当然不会看到任何事情