显示隐藏内容

Question

可能重复： JS/jQuery (隐藏div，单击显示div )

我对网络开发很陌生，我想知道隐藏元素的最佳方法是什么。我正在创建一个笔记记录应用程序，并希望有一个简单的“添加笔记”html表单，当你点击一个按钮展开。我会用CSS还是Javascript来做这个？

例如

Add Note

单击后将展开为html形式，如下所示

Note Title: <form>

Note Body: <form>

谢谢!

Answer 1

隐藏元素的方法有多种。您可以将display属性设置为hidden，也可以使用java脚本隐藏它。下面给出了使用jQuery的解决方案。

Html

<a href="#" class="clickme" > Add Note</a>
<div id="addNote">
    <!-- Your form goes here -->
</div>

您将您的Note表单放在具有id addNote的div中。它的javascript是

$(document).ready(function() {
    $('#addNote').hide();
    $('.clickme').click(function() {
      $('#addNote').show();
      $('.clickme').hide();
      return false;
    });
});

当页面加载时，首先addNote div是由这个$('#addNote').hide();隐藏的，当任何人单击类clickme的链接时，都会显示具有表单的div，而clickme按钮是隐藏的。

您可以向$('#addNote').show()添加转换效果。

Answer 2

我建议您使用jQuery库，它有很多选项可以轻松地在页面中显示/隐藏元素。下面是一个基本的示例，您可以找到更多的酷效果(fadeIn/fadeOut、slideUp/slideDown.)

Answer 3

您必须使用javascript来附加单击事件处理程序。当执行click事件处理程序时，您可以使用元素的javascript display属性从块切换到none。

喜欢

document.getElementById('elementID').onclick = function(){
var hiddenElement = document.getElementById('elementHidden');
if(hiddenElement.style.display=='none')
hiddenElement.style.display = 'block';
else
hiddenElement.style.display = 'none';
}