javascript - 我想做的一件棘手的 javascript 事情...从列表中提取元素并隐藏其余部分

Question

像往常一样，我想做的比我知道的还多:-D

这就是我正在做的事情......我正在写一篇简历。

但是在简介中，我想要一个“长简介”和一个“短简介”按钮。

长传记显然会显示整个传记，但短传记会捕获列表中的元素并将它们加粗并收缩 div 现在只包含这些列表元素。

我知道这很棘手(而且可能有点太“华而不实”)，但我希望以一种优雅的方式来做。

我可以用 animatedcollapse 脚本完成很多我想做的事情，但不完全是因为这只会隐藏大列表并使小列表的单独 div 可见。

这是我想要完成的:

<div id="bioWrap">
<h2>Bio</h2>
<p>Below is the bio you can read...<a href="" onclick="toggle The Long Bio And make the long bio and short bio buttons visable">read more</a></p>
<div id="bioTrigger">
<input type="button value="long"><input type="button value="short">
<ul>
<li> This would be text within the long bio</li>
<li> This would be text within the long bio</li>
<li id="This would remain in the li when short button is clicked"> This would be text within the long bio</li>
<li> This would be text within the long bio</li>
<li id="This would remain in the li when short button is clicked"> This would be text within the long bio</li>
<li> This would be text within the long bio</li>
</ul>
</div>
</div>

如果有帮助，我确实在这个项目上使用了 jquery...

Answer 1

我在这里注意到的第一件事是您正在为列表项使用 ID；在那里使用一个类可能会更好。不管怎样，这是我快速整理的东西。它没有经过测试，但我会在发布此答案后立即对其进行测试。 编辑:现已测试。 (而且有效)

$(function() {
    $("#toggle_bio").click(function() {
        $(this).toggleClass("collapsed");
        $("#bio li:not(.remain)").toggle("slow");
        return false;
    });
});

这是您如何格式化列表的示例:

<ul id="bio">
    <li>Nunc tempus mi non enim viverra tristique non pellentesque elit.</li>
    <li class="remain">Donec molestie rhoncus urna, ac vehicula risus malesuada nec.</li>
    <li>Vivamus vel mauris mi, tincidunt gravida nisi.</li>
    <li class="remain">Pellentesque sit amet metus ac nisi vulputate commodo dignissim quis dolor.</li>
    <li>Cras aliquam urna ultricies neque fermentum laoreet.</li>
    <li>Phasellus nec magna id lacus condimentum accumsan sollicitudin eget orci.</li>
</ul>

...这就是您可以添加切换按钮的方式:

<a id="toggle_bio" href="#">Toggle bio</a>

最后，如果你想把那些不会消失的加粗，你可以使用这个 CSS:

.remain {
    font-weight:bold;
}