使用javascript显示隐藏的HTML元素

Show hidden HTML elements with javascript

本文关键字：HTML 元素 隐藏 javascript 显示 使用      更新时间：2023-09-26

我的HTML 的<body>中有以下内容

<div class="exact">
<div> <a id ="button_some_id" href="#"> Toggle Hidden </a></div>
<div id="item_some_id" hidden>This is hided</div>
<script type='text/javascript'>
$("#button_some_id").click(function() {$("#item_some_id").toggle();});
</script>
</div>

链接到jfiddle

这里的想法是，我希望有人能够点击Toggle Hidden链接，它会显示一些隐藏的内容（当再次点击时，隐藏它）。然而，javascript并没有被触发。非常感谢您的任何帮助

您尚未将JQuery或JQuery UI输入到JSFiddle的资源中。一旦把它们放进去，它就起作用了：

https://jsfiddle.net/tj8o8gwf/2/

$("#button_some_id").click(function() {$("#item_some_id").toggle();}); //works fine

查看小提琴左手边的外部资源部分。

您还需要确保DOM已加载。

$( document ).ready(function() {
    $("#button_some_id").click(function() {$("#item_some_id").toggle();});
});

您需要确保jQuery已输入

$(document).ready(function () {
    $("body").on("click", "#button_some_id", function () {
        $("#item_some_id").toggle();
    });
});

试试这个

//HTML
<div class="toBeHidden" hidden>This is hided</div>

//JS inside your click
if ($(".toBeHidden").is(":visible"))
{
    $(".toBeHidden").hide('slow');
}
else
{
    $(".toBeHidden").show('slow');
}
相关文章：