Question

试图让这个div消失，似乎没有做我期望它做的事情，我哪里出错了？

它不会消失。

使用Javascript：

<script type="text/javascript">

function Show_Hide_Display() {

    var div1 = document.getElementById("checkAvailability");

        if (div1.style.display == "" || div1.style.display == "block") {
            div1.style.display = "none";
        }
        else {
            div1.style.display = "block";
        }

    return false;
}    

</script>

HTML：

<div runat="server" id="checkAvailability">
    <asp:LinkButton OnClientClick="Show_Hide_Display()" ID="lbtnCheckAvailability"     runat="server" CausesValidation="true" OnClick="lbtnCheckAvailability_Click">Check availability
    </asp:LinkButton>
</div>

我希望按钮几乎隐藏起来。

Answer 1

将您的行更改为：

var div1 = document.getElementById("<%=checkAvailability.ClientID%>");

原因是当在客户端呈现checkAvailability控件时，它可能具有或不具有相同的id（checkAvailability），因为asp.net将其容器控件或其他逻辑的id前置。

此<%=checkAvailability.ClientID%>将始终在客户端提供实际ID。

Answer 2

我认为你最好在这里看一些jQuery。例如，您的代码可能如下所示：

$(document).ready(function(){
   $('#yourbutton').click(function(){
      $(this).toggle();
   });
});

当然，在您的情况下，如果您出于某种原因需要，也可以隐藏包装div。它采用相同的方法。

Answer 3

除了@Icarus发布的内容之外，请修改您的代码。

OnClientClick="return Show_Hide_Display()"

这将阻止帖子发生。我猜你不希望发生回发，因为你的div /按钮会在回发后显示。

Answer 4

问题是linkbutton导致回发，因此由JS设置的div可见性，在回发后将恢复为它的默认值。即style.display将不会被保存。一个简单的解决方案就是添加简单的html按钮。像这样

<input type="button" value="hide the div" onclick="Show_Hide_Display()" />

这只是触发JS，不会导致回发，你的div可见性会按预期改变。

在客户端点击隐藏div

4 个答案: