[英]How to Show a Div when used display:none
I have hidden a <div>
based on a response from an ajax method using display: none
. 我已经使用
display: none
基于ajax方法的响应隐藏了<div>
。 What if I want to show the same <div>
upon another call to the AJAX method? 如果我想在再次调用AJAX方法时显示相同的
<div>
,该怎么办?
I am wondering if display: none
actually removes the element from DOM because using display: block
doesn't make the <div>
visible again. 我想知道
display: none
实际上display: none
从DOM中删除该元素,因为使用display: block
不会使<div>
再次可见。 How do I show and hide the same div using the display
attribute. 如何使用
display
属性显示和隐藏相同的div。 Here's the code I am using for the AJAX call: 这是我用于AJAX调用的代码:
$.ajax({
type: "POST",
url: "Request.aspx/FireEvents",
data: JSON.stringify({ controlValues: pageControlNamesAndValues }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var controlVals = response.d;
$.each(controlVals, function (index, currentControl) {
var targetDropDown = document.getElementById(ctrlName);
console.log('Targetdropdown is ' + targetDropDown);
if (targetDropDown != null) {
if (targetDropDown instanceof HTMLDivElement) {
if (currentControl.ControlName == "LogicChecks") {
if (currentControl.ControlValue = "hidden") {
targetDropDown.style.display = 'none';
} else {
targetDropDown.style.display = 'block';
}
}
}
}
});
}
});
The last line ( ...style.display ='block';
) doesn't show the <div>
once it has been hidden. 隐藏
<div>
后,最后一行( ...style.display ='block';
)不会显示它。
Use jQuery to show and hide: 使用jQuery显示和隐藏:
$("#"+ ctrlName).show()
$("#"+ ctrlName).hide()
Also use ==
to test for equality; 也使用
==
来测试是否相等; =
is assignment This statement is not testing for hidden but assigning hidden =
是赋值此语句不是测试隐藏的,而是分配隐藏的
if(currentControl.ControlValue="hidden")
Lastly 最后
var targetDropDown = document.getElementById(ctrlName);
if (targetDropDown == null) { targetDropDown =
document.getElementById(ctrlName); }
does not make logical sense 不合逻辑
Perhaps this is what you mean 也许这就是你的意思
function ProcessEventsActions(pageControlNamesAndValues) {
$.ajax({
type: "POST",
url: "Request.aspx/FireEvents",
data: JSON.stringify({
controlValues: pageControlNamesAndValues
}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var controlVals = response.d;
$.each(controlVals, function(index, currentControl) {
if (currentControl.ControlName == "LogicChecks") {
targetDropDown = $("#" + currentControl.controlDiv); // or whatever the name is
targetDropdown.toggle(currentControl.ControlValue != "hidden"); // show if not hidden
}
});
});
});
}
As discussed in the comments and demonstrated in Matt's answer, the method for showing / hiding elements is correct, that is 正如评论中所讨论并在Matt的答案中所演示的那样,显示/隐藏元素的方法是正确的,即
element.style.display = "block";
Behaves as you would expect, even after it has been hidden by applying display: none
. 即使通过应用
display: none
隐藏了它,也仍会表现出预期的效果display: none
。 Here is an example using jQuery instead (since this is a jQuery question): 这是一个使用jQuery的示例(因为这是一个jQuery问题):
$("#click1").click(function() { $("#el").hide(); }); $("#click2").click(function() { $("#el").show(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="el">Visible</div> <button id="click1">Click to hide</button> <button id="click2">Click to show</button>
The problem is definitely with the rest of your code. 问题肯定出在其余的代码上。 A likely suspect is this line:
这行可能是可疑的:
if (currentControl.ControlValue = "hidden") {
If you indeed copied your code directly and this is not a typo, this condition will always evaluate to true
/ a truthy value! 如果您确实直接复制了代码并且这不是错字,则此条件将始终评估为
true
/真实值! And this would cause the problems you are describing, since the code would always hide the element, never showing it again. 这将导致您正在描述的问题,因为代码将始终隐藏该元素,而不再显示它。 To fix this, simply replace the line with:
要解决此问题,只需将行替换为:
if (currentControl.ControlValue == "hidden") {
Here is an example of it working. 这是它工作的一个例子。 Make sure you are accessing the element correctly.
确保您正确访问元素。
<!DOCTYPE html> <html> <head> <style> #myDIV { width: 500px; height: 500px; background-color: lightblue; display:none; } </style> </head> <body> <p>Click the "Try it" button to set the display property of the DIV element to "block":</p> <button onclick="myFunction()">Try it</button> <div id="myDIV"> This is my DIV element. </div> <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p> <script> function myFunction() { document.getElementById("myDIV").style.display = "block"; } </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.