javascript - 从隐藏文本开始,单击显示文本

标签 javascript jquery css

这绝对是我的头,但我不得不问。我真正想要做的就是从隐藏文本开始,只有显示按钮,然后单击它以显示文本。它适用于法语 Dictée 网站,有人在该网站上听一个法语短语,在表单文本字段中写下他认为听到的内容,然后单击“显示”按钮以查看他是否正确。我尝试将 P 标签更改为可见性隐藏,但随后单击 SHOW 按钮不会显示它。

我在 toggle 下搜索,但似乎没有一个响应适合我。

这是搜索您的网站时唯一接近的答案,但我无法让文本开始隐藏,然后通过单击“显示”按钮显示它。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

感谢您的帮助。

巴里

好的,是的,我已经看到了,但这仍然会打开页面上带有 display:none 的任何 P 标记。我想要的是通过单击按钮能够显示单个段落。这些隐藏和显示按钮打开每个段落。

例如,在我的网站上,

http://techno-french.com/learning-french-online-free/learn-french-with-mouse-trap-dictee

我有两篇文章,一篇是法语,一篇是英语。我希望用户能够显示法语,同时隐藏英语,反之亦然显示英语,同时隐藏法语。可能的?不?是吗?

一如既往,感谢您的帮助。

巴里

最佳答案

Jquery hide 和 show 只能切换元素的 display 属性,不能切换可见性。您可以最初使元素 display:none 或更改 visibility 而不是 hide/show

  var $p = $('p');
  $("#hide").click(function(){
    $p.css('visibility', 'hidden');
  });
  $("#show").click(function(){
    $p.css('visibility', 'visible');
  });

或者只是:

 $("#hide, #show").click(function(){
      $('p').css('visibility', this.id == "show" ? 'visible' : 'hidden');
  });

Demo

或在初始样式集中

p{ /*This can vary based on which p you want to hide first*/
   display: none; /*Instead of visibility*/
}

只是一个缩短的版本。

$(document).ready(function () {
    $("#hide, #show").click(function () {
        $("p").toggle(this.id == "show");
    });
});

Demo

请注意,显示属性会将元素带出页面流,不会为其保留空间,在可见的情况下,您将看到元素保留的空白空间

关于javascript - 从隐藏文本开始,单击显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19147610/

相关文章:

html - Wordpress 内容 - 边框未扩展到全宽

javascript - 为什么在 razor View 页面中使用 JSON 编码的引号?

javascript - angularjs + ui 路由器 : redirect to login page when user is not logged in on each state change

javascript - $.mobile.changePage() 更改页面没有数据(白屏)?

html - 如何更改缩略图的背景色?

javascript - 将复选框选择的值从一个 div 复制到另一个 div

javascript - 对( javascript + html )代码进行少量操作

javascript - 从末尾索引数组

javascript - Django-Jquery 循环遍历所有选项

javascript - 如何动态更改 Bootstrap 模态主体