显示隐藏的内容

可能重复：
JS/jQuery (Hide div, show div on click)显示隐藏的内容

我新的网络开发和想知道什么隐藏要素的最佳方式了。我正在创建一个记事本应用程序，并希望有一个简单的“添加注释”html表单，当您单击按钮时该表单会展开。我会用CSS或Javascript做这个吗？

例如

Add Note

被点击将扩大到HTML表单像这样

Note Title: <form> 

Note Body: <form>

谢谢了！

来源

2011-12-26 Charles Murray

您可以使用CSS – Virendra 2011-12-26 05:49:36

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

的Html

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

你把你的笔记形式，ID为addNote股利。而对于这个JavaScript是

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

页面加载时，首先addNote格被隐藏这个$('#addNote').hide();当有人点击与类clickme具有形式DIV的链接上显示，并且clickme按钮被隐藏。

你可以，如果你正在使用JQuery添加转场效果$('#addNote').show()

来源

2011-12-26 05:54:36 Sachin

我建议你使用jQuery库，它有很多选项可以很容易地在页面中显示/隐藏元素。这里有一个基本的example，你可以找到很多很酷的效果（fadeIn/fadeOut，slideUp/slideDown ...），

来源

2011-12-26 05:51:07 talnicolas

你必须使用JavaScript来附加点击事件处理程序。当点击事件处理程序执行时，您可以使用JavaScript元素的display属性从block切换到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'; 
}

来源

2011-12-26 05:54:00

的“display”属性在'document.getElementById'，你除非你使用jQuery或其他东西，否则不需要'＃'。我相信事件处理程序是'onclick'。 'click'是一个本地函数，它允许你模拟任何元素的点击。另外，一些缩进会很好。 – 2011-12-26 06:18:45

感谢@Amaan混合了一点jquery编辑的答案 – 2011-12-26 07:13:13

这里是一个快速的解决方案：

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

来源

2011-12-26 06:37:01

显示隐藏的内容

回答

相关问题