当表单标记存在时，jquery在asp.net主页中不工作，但当我删除它时，脚本工作。是什么引起的？

Question

这是我的标记。简单地解释一下，main-nav_list隐藏在handhleds上，脚本切换类main-nav_list--在选择汉堡包图标时是可见的。如果我在这里用id=form1和runat服务器取出表单标签，一切都很好。有了它，脚本就会简单地滑动切换元素。它的工作方式是相同的，如果我使用切换或滑动按钮。它在切换类中工作一秒钟，然后解散。我试着把它放在页面的不同区域，表单标签的外部和内部，但是如果表单标签在那里，它的工作原理总是一样的。我需要保持runat服务器表单标签的假设。说到asp.net，我是个菜鸟。是什么导致了这一切，我能做些什么来解决这个问题呢？

    <form id="form1" runat="server"> 
<header role="banner" id="header">
    <nav role="navigation" class="main-nav grid-container">
        <a href="../Default.aspx" class="logo"></a>
        <ul class="main-nav__list">
            <li class="main-nav__list__item"><a></a></li>
            <li class="main-nav__list__item"><a></a></li>
            <li class="main-nav__list__item"><a></a></li>
            <li class="main-nav__list__item"><a></a></li>
        </ul>
    </nav>
    <button class="btn--hamburger-icon">
        <div></div>
        <div></div>
        <div></div>
    </button>
</header>
<div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</div>

</form>

这是剧本。我只把脚本放在页面底部，以便更容易地对我进行测试。

  <script type="text/javascript" lang="javascript">
    $(document).ready(function () {
        $(".btn--hamburger-icon").on("click", function () {
            $(".main-nav__list").toggleclass("main-nav__list--is-visible");
        });
    });
</script>

这是相关的css。

     .main-nav__list--is-visible {
    display: flex !important;
    z-index: 9999 !important;
   }

       .logo {
      width: auto;
      height: rem-calc(50px);
      padding: rem-calc(0 10px);
      font-family: 'Metal Mania', cursive;
      font-size: 30px;
      text-align: center;
      line-height: rem-calc(50px);
      color: #ffffff;
      z-index: 9999;}

     .main-nav {
       position: relative;
       display: flex;
       flex-direction: row;
       flex-wrap: nowrap;
   @include respond-to(desktops) {
    position: static;
    justify-content: space-between;
      }
   }

  .main-nav__list {
      position: absolute;
      top: rem-calc(50px);
      left: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      height: rem-calc(200px);
      text-align: center;
      display: none;


@include respond-to(desktops) {
    position: static;
    top: auto;
    left: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    height: auto;
     }
   }

 .main-nav__list__item {
    display: flex;
    height: rem-calc(50px);
    background-color: $nav-background-color;
    width: 100%;
   @include respond-to(desktops) {
      width: auto;
         }
     a {
        color: #ffffff;
        line-height: rem-calc(50px);
        height: 50px;
        width: 100%;
     @include respond-to(desktops) {
        width: auto;
        padding: 0 14px 0 14px;
    }

    &:hover {
        background-color: $nav-hover-color;
         }
      }
  }
 .btn--hamburger-icon {
      display: block;
      position: absolute;
      top: rem-calc(5px);
      right: rem-calc(2px);
      width: rem-calc(39px);
      height: rem-calc(39px);
      padding: rem-calc(1px 4px);
      background: $nav-background-color;
      border: none;
      cursor: pointer;
      outline: none;
@include respond-to(desktops) {
    display: none;
}
& > div {
    width: rem-calc(17px);
    height: rem-calc(3px);
    background: #ffffff;
    margin: rem-calc(3px 0);
    text-align: center;
    }
 }

Answer 1

按钮提交表单。也就是说，在执行脚本之后，表单的内容将发送到服务器，页面将被重新加载。

你不想这样，所以可能的解决办法是：

1. 给按钮type="button"，使其不再提交。(默认情况下按钮为type="submit" )
2. return false位于单击处理程序函数的末尾，以防止按钮执行其默认操作。 $(“..btn汉堡包-图标”).on(“单击”，函数() {.on返回false；})；

顺便说一句，这个问题并不是ASP.NET特有的，它也发生在计划HTML/Javascript环境中。