我有一个简单的 MVC 5 页面,其中有一个下拉列表。根据从该下拉列表中所做的选择,我启用了页面上三个 div 之一的可见性。我遇到的问题是每个 div 都占用页面上的空间,即使它不可见。因此,当我从下拉列表中选择导致第二个 div 可见的内容时,我将看到该内容在页面上向下移动。
以下是 Controller 中用于创建下拉列表数据的代码。
public ActionResult Index()
{
var searchBy = new List<SearchBy>
{
new SearchBy { Name = "Email Address", Value = "EmailAddress" },
new SearchBy { Name = "Last name, First name", Value = "Name" },
new SearchBy { Name = "Username", Value = "Username" }
};
ViewBag.SearchByOptions = new SelectList(searchBy, "Value", "Name");
return View();
}
这是我的 Index.cshtml 标记
@{
<script type="text/javascript">
$(document).ready(function() {
// Make all three <div>s hidden when the page loads...
document.getElementById("searchByEmail").style.visibility = "hidden";
document.getElementById("searchByName").style.visibility = "hidden";
document.getElementById("searchByUsername").style.visibility = "hidden";
});
function searchBy(selectedItem) {
if (selectedItem == "EmailAddress") {
// Make visible
document.getElementById("searchByEmail").style.visibility = "visible";
// Make in-visible
document.getElementById("searchByName").style.visibility = "hidden";
document.getElementById("searchByUsername").style.visibility = "hidden";
}
if (selectedItem == "Name") {
// Make visible
document.getElementById("searchByName").style.visibility = "visible";
// Make in-visible
document.getElementById("searchByEmail").style.visibility = "hidden";
document.getElementById("searchByUsername").style.visibility = "hidden";
}
if (selectedItem == "Username") {
// Make visible
document.getElementById("searchByUsername").style.visibility = "visible";
// Make in-visible
document.getElementById("searchByEmail").style.visibility = "hidden";
document.getElementById("searchByName").style.visibility = "hidden";
}
};
</script>
}
<h2>Index</h2>
<div>
Search for existing users by: @Html.DropDownList("SelectedItem", (SelectList)ViewBag.SearchByOptions, "-- Select One --", new { onchange = "searchBy($('#SelectedItem').val());" })
</div>
<div id="searchByEmail">
Emails...
</div>
<div id="searchByName">
Names...
</div>
<div id="searchByUsername">
Usernames...
</div>
}
我不确定需要什么技巧才能让所有 div 在页面上占据相同的“空间”,因为我一次只会显示其中一个。
最佳答案
假设您使用 jQuery,请尝试:
@{
<script type="text/javascript">
$(document).ready(function() {
$("#searchByEmail").hide();
$("#searchByName").hide();
$("#searchByUsername").hide();
});
function searchBy(selectedItem) {
if (selectedItem == "EmailAddress") {
$("#searchByEmail").show();
$("#searchByName").hide();
$("#searchByUsername").hide();
}
if (selectedItem == "Name") {
$("#searchByName").show();
$("#searchByEmail").hide();
$("#searchByUsername").hide();
}
if (selectedItem == "Username") {
$("#searchByUsername").show();
$("#searchByEmail").hide();
$("#searchByName").hide();
}
};
</script>
}
<h2>Index</h2>
<div>
Search for existing users by: @Html.DropDownList("SelectedItem", (SelectList)ViewBag.SearchByOptions, "-- Select One --", new { onchange = "searchBy($('#SelectedItem').val());" })
</div>
另外,检查一下 CSS 规则之间的区别:
visibility:hidden
和
display:none
第一个只是隐藏元素,但保留占位符的大小与其可见的大小相同。 第二个将其从大小和尺寸计算中删除。
关于c# - 如何使用 CSS 包含隐藏的 DIV 而不会占用空间?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23295414/