单击一个地点，注册为其他地方的点击

因此，我使用展开的列表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注册。

来源

2013-05-03 Jānis Lazovskis

请发表您已尝试 – Ejaz 2013-05-03 23:30:13

尝试这样：

$('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>文字是一样的，你要在其上触发click事件li内的文本。由于在你的情况下这不是真的，所以最好分配一些id并与它们一起工作，它需要更少的代码和DOM迭代。从你的例子

<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

有关HTML摘录

$('#showhidesongs').click(function() { $('#listofsongs').trigger('click'); });

来源

2013-05-03 23:36:43

OK了HTML和Javascript，我想我看到这是怎么回事，但我遇到了一些麻烦。我在'function prepareList（）{'内部添加了你的代码，并且将'this'这个词加到了我想要点击的那一行上，但是当我点击''中的文本时没有任何反应（参见我放入题）。你能告诉我我做错了什么吗？ – 2013-05-04 17:06:46

我已经编辑了一个如何做你想要的例子的答案。 – 2013-05-04 23:20:32

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

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的东西来重写这个逻辑。您可以将data-target="abc"添加到li，让jQuery代码读取该值并打开或关闭该值为id的ul。你必须确保所有的家长也被打开，否则你会看到什么情况发生，当然

来源

2013-05-03 23:33:04 koenpeters

单击一个地点，注册为其他地方的点击

回答

相关问题