Question

新手在这里。我已经苦苦挣扎了几天试图找出原因，在两个滑块命令和由两个滑块命令控制的div之后添加表单元素后，此代码将无法正常运行。如果没有表单标签，框会按原样上下滑动。添加表单标签，当单击slideClose按钮但是将返回到向下位置时，框将滑动，就好像折叠一样。谢谢，贝蒂

P.S。您可以在页面上看到代码运行不正常：http://zillionreasons.net/twig/testarea/testslider.php

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div#box {
      background: #9DCEFF;
      width: 400px;
      height: 200px;
      overflow: hidden;
    }
    </style>
    <script>
    function slideOpen(el){
      var elem = document.getElementById(el);
      elem.style.transition = "height 0.2s linear 0s";
      elem.style.height = "200px";
    }
    function slideClosed(el){
      var elem = document.getElementById(el);
      elem.style.transition = "height 0.2s linear 0s";
      elem.style.height = "0px";
    }
    </script>
    </head>
    <body>
    <form action="" method="post">
    <button onclick="slideClosed('box');">slideClosed</button>
    <button onclick="slideOpen('box');">slideOpen</button>
    <div id="box">Content in box 1 ...</div>
    </form>
    </body>
    </html>

Answer 1

<form>标记实际上并未导致页面中断。它的工作（通常）是向服务器提交请求。真正发生的是每次单击表单中的一个按钮时，它都会向您当前所在的URL提交请求，因为表单的操作设置为空白。

换句话说，每次按下按钮都会将页面重新加载到展开框的默认状态。

如果您计划在可折叠<div>中添加要提交的内容，则应在<form>之外移动“展开/折叠”按钮，如果您不希望他们提交请求服务器，如下：

<button onclick="slideClosed('box');">slideClosed</button>
<button onclick="slideOpen('box');">slideOpen</button>
<form action="" method="post">
    <div id="box">Content in box 1 ...</div>
</form>

当窗体元素包围时，窗口滑块失败

1 个答案: