当表单标签存在时，jquery 脚本在 asp.net 母版页中不起作用，但是当我删除它时脚本起作用。这是什么原因造成的？

Question

这是我的标记。简要说明 main-nav__list 隐藏在手柄上，并且当您选择汉堡包图标时，脚本会切换 class main-nav__list--is-visible。如果我在下面使用 id=form1 和 runat server 取出表单标签，一切正常。有了它，脚本会简单地滑动切换元素。如果我使用toggleclass 或slidetoggle，它的工作原理是一样的。它在切换类中工作一瞬间然后消失。我尝试将它放在页面的不同区域，表单标签的外部和内部以及外部，但如果表单标签在那里，它总是一样的。我需要保留 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"）

   <button class="btn--hamburger-icon" type="button">
   

2. return false 在单击处理函数的末尾，以防止按钮执行其默认操作

   $(".btn--hamburger-icon").on("click", function () {
       $(".main-nav__list").toggleclass("main-nav__list--is-visible");
       return false;
   });
   

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