所以我使用了展示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
上注册。
答案 0 :(得分: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');
});
答案 1 :(得分: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
这样的东西重写这个逻辑。您可以向data-target="abc"
添加li
,让jQuery代码读取该值,然后打开或关闭具有该值ul
的{{1}}。你必须确保所有的父母都被打开,否则你什么也看不到