Question

我有一个简单的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都采用相同的＃34;房地产＆＃34;在页面上，因为我一次只会显示其中一个。

enter image description here

Answer 1

假设您使用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

第一个只隐藏元素，但保留占位符与可见的大小相同。第二个将其从尺寸和尺寸计算中删除。

Answer 2

.style.display = "block"; /* or none to hide it */

如何在不占用空间的情况下使用CSS包含隐藏的DIV？

2 个答案: