Question

可能重复：
JS/jQuery (Hide div, show div on click)

我是网络开发的新手，并且想知道隐藏元素的最佳方法是什么。我正在创建一个笔记记录应用程序，并希望有一个简单的“添加注释”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>

您将注释表单放入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库来轻松地在你的页面中显示/隐藏元素。这是一个基本的example，您可以通过很酷的效果找到更多（fadeIn / fadeOut，slideUp / slideDown ...），

Answer 3

您必须使用javascript附加Click事件处理程序。当click事件处理程序执行时，您可以使用元素的javascript显示属性从块切换到无。

喜欢


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

Answer 4

如果您使用的是JQuery，这是一个快速的解决方案：

$(function(){
   $("#YOUR ADD NOTE ELEMENT ID").click(function(){
       $("#YOUR FORM ID").toggle();
   })
})

显示隐藏的内容

4 个答案: