Javascript 如何在单击按钮时隐藏列表中除跨度元素以外的所有元素？

我真的希望能完成这一切，但遗憾的是，我没有足够的经验来完成这些最后的步骤。我有一个很长的无序列表，它将通过按钮切换关闭，并且只显示列表中的某些元素。这很好，但问题是我只需要显示列表中跨度内的文本。我昨天在网上看到了一个正在做的教程 大概是这样的： $（“#bio-li:not（.remaine>span）”）。切换（“slow”）

但这不起作用——我想我做错了。到目前为止，我得到的是：

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


<ul id="bio">
    <li>Long bio text.</li>
    <li class="remain">text will remain.</li>
    <li>Long bio text.</li>
    <li class="remain">text will remain.</li>
    <li>Long bio text.</li>
    <li>Long bio text.</li>
</ul>

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

$（函数（）{
$（“#切换_bio”）。单击（函数（）{
$（this.toggleClass（“折叠”）；
$（“#bio-li:not（.remaine）”）。切换（“slow”）；
返回false；
});
});

长的生物文本
文本将保留
长的生物文本
文本将保留
长的生物文本
长的生物文本

现在这很好，但我还需要完成两件事：

1） 我只需要将跨距内的文本保留在.remaine列表中：

<li class="remain">This text will go away <span>But this text will stay</span></li>

此文本将消失，但此文本将保留

我需要将此切换按钮更改为两个按钮：

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

变成类似于：

<a id="longBio" href="#">Long Bio</a><a id="shortBio" href="#">Short Bio</a>

---

我对javascript还是很陌生，所以在回答时请记住这一点。如果可能的话，我不想改变解决方案的整个逻辑，而是修改一两个元素来实现这一点。谢谢大家!

新标记的问题在于跨度与文本节点处于同一级别，但css无法直接将文本节点作为目标

有两种方法可以让这一切顺利进行

将要隐藏的文本用span括起来，或

使用javascript删除要隐藏的文本，并在显示时重新插入

前者要简单得多，因此不使用

<li class="remain">This text will go away <span>But this text will stay</span></li>

至于链接，应该相当简单。只需像这样修改您的单击处理程序

$("#longBio, #shortBio").click(function() {
    if ($(this).attr("id") == "longBio")
        $("#bio li:not(.remain), #bio li.remain span").show("slow");
    else
        $("#bio li:not(.remain), #bio li.remain span").hide("slow");
    return false;
})

编辑：

如果需要更多地控制用于显示和隐藏的显示值，可以使用css类。例如：

.hidden { display:none; }

然后将切换功能更改为

$("#longBio, #shortBio").click(function() {
    if ($(this).attr("id") == "longBio")
        $("#bio li:not(.remain), #bio li.remain span").removeClass("hidden");
    else
        $("#bio li:not(.remain), #bio li.remain span").addClass("hidden");
    return false;
});

---

另一种选择是：

$("#bio li:not(.remain)).hide().children('span').show();

---

我没有测试该代码，但它应该可以工作，因为CDATA文本get的样式首先显示为：none，然后显示span节点。

完美！感谢您提供的span提示非常有效！！你能详细说明一下如何将切换分为两个按钮吗？当我折叠列表然后展开它时，发生了一件奇怪的事情，列表显示为：block元素。不知道为什么？这很奇怪。若您想更好地控制在lis和spans上显示和隐藏所使用的显示值，您应该使用addClass和removeClass以及包含您喜欢的显示样式的类。这似乎只是一个折叠、展开的动作。折叠时，隐藏列表项将显示：无。展开后，图元属性将更改为“显示：块”。扩展时如何使ul.bio li.lessonslist span{display:block}变为ul.bio li.lessonslist span{display:inline}？这解决了firebug中的问题。您必须使用自己的类。我将用一个例子编辑我的答案。隐藏

li

将导致隐藏所有子项。这很可能会产生这样的标记：

诸如此类，其中跨度显然是隐藏的。是的，我在下班后尝试过测试它。刚要更新就说不行了。
$("#longBio, #shortBio").click(function() {
    if ($(this).attr("id") == "longBio")
        $("#bio li:not(.remain), #bio li.remain span").removeClass("hidden");
    else
        $("#bio li:not(.remain), #bio li.remain span").addClass("hidden");
    return false;
});

$("#bio li:not(.remain)).hide().children('span').show();