Question

我正在使用HTML，CSS，JavaScript和jQuery创建一个Web应用程序的原型，该应用程序将在iPad上使用。我编写了一个测试页面，它有两个div：一个用于输入字段，另一个用于显示帮助文件（在我的例子中是PDF）。页面启动后，将显示第一个div，第二个div将折叠。在div-tags上方，我有一个按钮。当我第一次启动页面并单击该按钮时，我想用输入字段折叠div并使用帮助文件显示另一个div。下次我点击按钮我想再次显示输入字段的div并使用帮助文件折叠div。但是当我在启动测试页面后单击按钮时，第一个div（带有id“content”）将折叠，并且help-div显示为小数秒，并恢复页面的原始状态。

有人可以帮帮我吗？

这是我正在使用的HTML：

<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;">
    <table>
        <tr>
            <td>
                <button id="load_help" style="font-weight:bold; margin:5px; float:right;">i</button>
            </td>
        </tr>
        <tr>
            <td>
                <div id="content" style="height:300px; width:500px; background-color:yellow; display:block;">
                    <label style="position:absolute; top:10px; left:10px; font-family:Arial; font-style:normal; font-weight:bold; font-size:16px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Test page</label>
                    <label style="position:absolute; top:50px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 1</label>
                    <label style="position:absolute; top:90px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 2</label>
                    <label style="position:absolute; top:130px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 3</label>
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="help" style="width:500px; height:200px; background-color:aqua; display:none;">
                    <object type="application/pdf" data="../HelpDocuments/MyPdf.pdf" style="width:500px; height:500px;"></object>
                </div>
            </td>
        </tr>
    </table>

    <script src="../scripts/jquery-2.2.4.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function () {
                $("#load_help").click(function () {
                    var contentElement = document.getElementById("content");
                    var helpElement = document.getElementById("help");
                    if (contentElement.style.display == "block") {
                        contentElement.style.display = "none";
                        helpElement.style.display = "block";
                    }
                    else {
                        contentElement.style.display = "block";
                        helpElement.style.display = "none";
                    }
                });
            });
    </script>
</form>

Answer 1

您的问题是，当您单击按钮时“提交”表单，您需要阻止这样的事件：

e.preventDefault()

您也可以将按钮键入为按钮，以防止这样提交：

<button type="button"></button>

$(document).ready(function() {
  $("#load_help").click(function(e) {
    var contentElement = document.getElementById("content");
    var helpElement = document.getElementById("help");
    if (contentElement.style.display == "block") {
      contentElement.style.display = "none";
      helpElement.style.display = "block";
    } else {
      contentElement.style.display = "block";
      helpElement.style.display = "none";
    }
    e.preventDefault();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form style="position:relative; height:100%; width:100%; overflow-x:scroll; overflow-y:scroll;">
  <table>
    <tr>
      <td>
        <button id="load_help" style="font-weight:bold; margin:5px; float:right;">i</button>
      </td>
    </tr>
    <tr>
      <td>
        <div id="content" style="height:300px; width:500px; background-color:yellow; display:block;">
          <label style="position:absolute; top:10px; left:10px; font-family:Arial; font-style:normal; font-weight:bold; font-size:16px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Test page</label>
          <label style="position:absolute; top:50px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 1</label>
          <label style="position:absolute; top:90px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 2</label>
          <label style="position:absolute; top:130px; left:20px; font-family:Arial; font-style:normal; font-weight:bold; font-size:12px; text-align:left; border-left-style:none; border-left-width:unset; border-top-style:none; border-top-width:unset; border-right-style:none; border-right-width:unset; border-bottom-style:none; border-bottom-width:unset; height:auto; width:auto; word-wrap:normal; overflow:auto;">Label 3</label>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="help" style="width:500px; height:200px; background-color:aqua; display:none;">
          <object type="application/pdf" data="../HelpDocuments/MyPdf.pdf" width="500px" height="500px"></object>
        </div>
      </td>
    </tr>
  </table>


</form>

div的折叠和显示将立即恢复

1 个答案: