Question

它的意思是显示谜语，然后单击按钮，它会显示答案

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Riddles</title>
<link href="/css/favicon.ico" rel="shortcut icon" type="image/icon" />
<link href="/style.css" type="Cascading style sheet/text" />
</head>
<body>

这是链接

<li>What did the Robot say to the gas pump</li>
<script type="javascript/text">
     function unhide (){
     style(document).ready
     var hid = ("div.exp")
          if (true) hid.css("visibility",hidden);
            hid({
            visibility:visible
            });
     }
 </script>
<button onclick="unhide()">Show Answer</button>
<div class="exp">
    <p class="and">Take your finger out of your ear and listen to me</p>
</div>
<!--take your finger out of your ear and listen to me-->

style.css是

.exp{
 visibility:hidden;
}

为什么不起作用？因为它应该起作用

我尝试了许多不同的方式

Answer 1

请尝试以下代码。我必须从头开始，因为您的代码有点混乱。

function unhide() {
    var hid = document.getElementsByClassName("exp");
    // Emulates jQuery $(element).is(':hidden');
    if(hid[0].offsetWidth > 0 && hid[0].offsetHeight > 0) {
        hid[0].style.visibility = "visible";
    }
}

<head>
<style>
.exp{visibility: hidden;}
</style>
</head>
<body>
<button onclick="unhide()">Show Answer</button>
<div class="exp">
    <p class="and">Take your finger out of your ear and listen to me</p>
</div>
</body>

只是一些建议。

如果只想修改一项，则使用id更好。
如果您是从入门开始，我相信jquery可能更容易学习。
检查您的javascript语法，到目前为止，它有点混乱。

Answer 2

没有JavaScript的另一种方法是使用内部带有<details> element的<summary> element。浏览器将提供交互性。

<details>
  <summary>What did the robot say to the gas pump?</summary>
  <p>Take your finger out of your ear and listen to me!</p>
</details>

单击按钮即可显示文字

2 个答案: