一个棘手的javascript东西我'；我想做…从列表中提取元素并隐藏其余的

像往常一样，我想做比我知道如何做更多的事情

这是我正在做的…我正在写一篇个人简历

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

长bio显然会显示整个bio，但短bio会抓取列表中的元素，并将其加粗，并将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>

生物
下面是你可以阅读的简历


这将是长简历中的文本
这将是长简历中的文本
这将是长bio中的文本
这将是长简历中的文本
这将是长bio中的文本
这将是长简历中的文本

---

我在这个项目上有jquery，如果有帮助的话…

我注意到的第一件事是，您正在为列表项使用ID；在那里使用类可能更好。不管怎样，我很快就把一些东西整理好了。它没有测试，但我会在我发布这个答案后立即测试它编辑：现在已经测试过了。（而且有效）

这是如何设置列表格式的示例：

<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>

---

嘿，我有身份证在名单上，你是这个意思吗？我同意类在那里会更好，因为他们都会做同样的事情。有一件事——我希望他们在点击按钮后加粗…所以我想我需要在点击后添加一个类…这真的很棒！非常感谢。我想我可以把我需要的其他部分拼凑起来。我编辑了答案来切换

#bio

类，所以现在如果你想让剩下的部分在折叠时只加粗，你可以使用CSS规则：

#bio.collapsed li{font-weight:bold；}

Sweet…如果我可以这么大胆的话-我正在尝试找出如何将切换功能分为两个按钮（长按钮和短按钮）-这实际上对我很有帮助，因为我可以看到这些示例之间的差异。。。

<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>

.remain {
    font-weight:bold;
}