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

Question

这是我的标记。简要说明 main-nav__list 隐藏在 handhleds 上，脚本切换类 main-nav__list——当你选择汉堡包图标时可见。如果我用 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. 在点击处理函数结束时返回 false 以防止按钮执行其默认操作

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

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