使用show或在JavaScript中顯示

Question

我正在使用下面的JavaScript代碼。 而不是隱藏。 我想要div是否可見，然后在頁面加載時將其隱藏。 在按鈕上單擊它應該是可見的。 但目前情況正相反。

<script type="text/javascript">
    $(document).ready(function () {
        $("#lnkbtn").click(function () {
           if ($('#divreg').is(":hidden")) {
                $('#divreg').show(500);
                document.getElementById('lnkbtn').innerHTML = "Hide";
            } else {
                $("#divreg").hide(500);
                document.getElementById('lnkbtn').innerHTML = "Show";

            }

        });
    });
</script>

HTML：

   <asp:Button ID="lnkbtn" runat="server" Text="Additional Details" CausesValidation="False" OnClientClick="return false;"  />
   <div id="divreg">
     <p> Some content here.. </p>
   </div>

Answer 1

在您的提琴中，您正在使用"display:none"作為隱藏div的CSS，但是您正在檢查是否正在使用:hidden ，這意味着它將永遠不會測試為真； 您需要將css更改為"visibility:hidden" ，並且按預期工作

Answer 2

看到這個小提琴 。

您可以在load jquery時將其隱藏，檢查是否可見將其隱藏：

if ($('#divreg').is(":visible")) {
  $("#divreg").hide();
}

然后在您的click事件上執行隱藏/顯示：

$("#lnkbtn").click(function() {
  if ($('#divreg').is(":hidden")) {
    $('#divreg').show(500);
    $('#lnkbtn').val("Hide");
  } else {
    $("#divreg").hide(500);
    $('#lnkbtn').val("Show");

  }

});