使用 jQuery 显示或隐藏 div 元素答案

【问题标题】：Show or Hide a div element using jQuery使用 jQuery 显示或隐藏 div 元素
【发布时间】：2014-11-11 09:52:47
【问题描述】：

我是jquery 的新手，我正在尝试隐藏某些div 元素，然后在我的Ajax 调用成功时显示它们。页面加载时，浏览器隐藏div 元素，Ajax 成功时显示元素，但浏览器再次隐藏div 元素。

代码

<script>
	$(document).ready(function() {

		$('#sidebar-container').hide(1000);
		$('#overall-status').hide(1000);


		$('#submit-date').click(function() {
			var processDate = $('#processDate').val();
			alert(processDate);
			$.ajax({
				type : "POST",
				url : "launchapptest",
				data : processDate,
				dataType : "json",
				success : function(result) {
					alert("Success");
					$('#sidebar-container').css({
						visibility : "visible"
					});
					$('#overall-status').css({
						visibility : "visible"
					});

				}
			});
		}

		);

	});
</script>

请帮助我了解发生了什么以及如何避免这种情况。

【问题讨论】：

$('#sidebar-container').show() 会解决你的问题
请阅读这2篇文章api.jquery.com/show和api.jquery.com/hide
ajax 调用是如何触发的？如果是表单提交，页面可能会重新加载，因此不会触发 succes-function。如果您也发布一些 html 代码可能会有所帮助
是的，Ajax 在 Ajax 提交按钮单击时触发...我应该创建一个按钮而不是提交吗？
提交后网站是否重新加载？

标签： javascript jquery html css ajax

【解决方案1】：

使用 jquery Show 事件。

$(document).ready(function() {

        $('#sidebar-container').hide(1000);
        $('#overall-status').hide(1000);


        $('#submit-date').click(function() {
            var processDate = $('#processDate').val();
            alert(processDate);
            $.ajax({
                type : "POST",
                url : "launchapptest",
                data : processDate,
                dataType : "json",
                success : function(result) {
                    alert("Success");
                    $('#sidebar-container').show();
                    $('#overall-status').show();

                }
            });
        }

        );

    });

【讨论】：

试过了，仍然 .hide(1000) 函数被调用，它隐藏了 div 元素

【解决方案2】：

问题已解决，我创建了一个表单提交按钮来启动 Ajax 调用。将其更改为普通输入按钮。因此页面正在重新加载。

我将提交按钮更改为输入按钮，以解决此问题。

非常感谢大家的帮助。

【讨论】：

啊……时机不对。刚刚将其添加到我的答案中作为可能的问题:)

【解决方案3】：

您必须先停止每个元素的当前动画队列（因为非动画 CSS 更改不会添加到该队列中）：

此外，正如其他地方提到的，show() 是 css visibility 的更好选择，因为隐藏集 display: none 而不是 visibility。

  success : function(result) {
                alert("Success");
                $('#sidebar-container').stop().show();
                $('#overall-status').stop().show();
            }

此外，您可能不会停止提交表单，因此页面将重新加载并重新隐藏 div。尝试停止该按钮的默认行为。

$('#submit-date').click(function(e) {
     e.preventdefault()

【讨论】：

通过 css 声明的可见性不会影响 display:none from .hide()。为了使 .show() 将显示设置为阻止（也可以使用 .css() 设置）
@Tushar：使用上面的新信息再试一次。您的页面可能正在重新提交。

【解决方案4】：

.hide() 将样式设置为display:none。你需要打电话给.show()，而不是.css({visibility:'visible'});

【讨论】：

试过了，仍然 .hide(1000) 函数被调用，它隐藏了 div 元素...我已经在标签中声明了脚本，这就是调用隐藏函数的原因再来一次？