Javascript 动态调整div大小时隐藏（和显示）链接

当用户决定隐藏（或显示）特定内容时，我尝试调整div的大小。例如，我有一个目录页（），当用户单击

hide

，我希望div相应地调整大小，隐藏除实际目录标题之外的所有内容

此外，“显示”链接应仅在内容实际隐藏时显示，反之亦然

我尝试根据在线发现的类似问题改编一些JS，并尝试了以下方法：

<script language="javascript">
            function toggle() {
                var ele = document.getElementById("contents-list");
                if (ele.style.display == "block") {
                    ele.style.display = "none";
                } else {
                    ele.style.display = "block";
                }
            }
        </script>

函数切换（）{
var ele=document.getElementById（“目录列表”）；
如果（ele.style.display==“块”）{
ele.style.display=“无”；
}否则{
ele.style.display=“块”；
}
}

---

但上述措施一事无成。如有任何建议/解决方案，将不胜感激

将该结构用作HTML:

<div id="contents-list">
    <ul>
        <li id="centerContents"><b> Contents </b> 
            <a class="hideLinks" href="#">[Hide]</a>
            <a class="showLinks" href="#">[Show]</a>
        </li>
    </ul>
    <ul class="submenu">
        <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
        <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
        <li> <a href="#jumpQ3"> 3.  Other </a> </li>
    </ul>
</div>

<script type="text/javascript">
    $("#contents-list ul li a.hideLinks").click(function(){
        $("ul.submenu").css("display", "none");
    });

    $("#contents-list ul li a.showLinks").click(function(){
        $("ul.submenu").css("display", "block");
    });
</script>

内容

使用jQuery:

<div id="contents-list">
    <ul>
        <li id="centerContents"><b> Contents </b> 
            <a class="hideLinks" href="#">[Hide]</a>
            <a class="showLinks" href="#">[Show]</a>
        </li>
    </ul>
    <ul class="submenu">
        <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
        <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
        <li> <a href="#jumpQ3"> 3.  Other </a> </li>
    </ul>
</div>

<script type="text/javascript">
    $("#contents-list ul li a.hideLinks").click(function(){
        $("ul.submenu").css("display", "none");
    });

    $("#contents-list ul li a.showLinks").click(function(){
        $("ul.submenu").css("display", "block");
    });
</script>

$（“#目录列表ul li a.hideLinks”）。单击（函数（）{
$（“ul.子菜单”）.css（“显示”、“无”）；
});
$（“#目录列表ul li a.showLinks”）。单击（函数（）{
$（“ul.子菜单”）.css（“显示”、“块”）；
});

jQuery脚本应该在HTML之后，或者在

标记附近。并确保在

head

标记内调用jQuery cdn:

---

注意：您可以使用

Show（）

和

Hide（）

函数代替css显示属性。您可以阅读有关这些函数的更多信息。

通过使用事件的目标，我们可以确定要显示/隐藏的内容。 如果我们这样做，我们可以在一个页面上多次使用它，而不会相互干扰

此外，我还使用了toggle（），它基本上实现了代码语句中的if（）

$（文档）.ready（函数（）{
$（'.toggle'）。单击（函数（事件）{
$（event.target）.parents（'.contents list'）.find（'ul'）.toggle（）；
var newText=$（event.target）.text（）==='[Hide]'？'[Show]'：'[Hide]'；
$（event.target）.text（newText）；
});
});

.contents列表{
宽度：300px；
背景色：#f4f6f9；
填充：15px；
边框：1px实心#b3b5；
}
.目录{
列表样式类型：无；
保证金：0；
填充：0；
字体大小：14px；
}
#目录{
文字装饰：无；
}
.目录表ul li a{
垫底：2件；
文字装饰：无；
}
.目录列表a:已访问{
文字装饰：无；颜色：蓝色；
}
.目录列表ul li a：悬停{
文字装饰：下划线；
}
.centerContents{
文本对齐：居中；
}
.切换{
字体大小：12px；
}

目录







目录

如果您只希望“内容”标题可见，那么用户应该如何取消隐藏其余内容？假设jQuery是可以的。检查这个更新的提琴：等一下，先生，我想我可以帮你。先生，如果你需要，然后尝试这个链接，如果它是工作，而不是敲我请我可以通过你的提琴看到你的方法是有效的，这正是我要找的。然而，我似乎无法模仿结果，是否有我遗漏的东西？是的，密切注意ID和类名。由于我将它用于多个面板，所以我将您使用的ID更改为类。ID应该是唯一的，可以多次添加类。在jquery代码中，ID和类是CSS中的目标；ID为“#”，类为“.”。所以，换成，它应该在你的小提琴工作。