sidenav 关闭时按钮不起作用

Question

由于某些原因，我正在我的网站按钮上的登录页面上工作，当 sidenav 退出时提交按钮不可点击（我正在使用 materialize 框架）。

我对我的 sidenav 做了一些修改，这样当它出来时覆盖会被删除，并且在它外面单击时它不会关闭。

$('.button-collapse').sideNav({
          menuWidth: 260, 
          edge: 'left', 
          closeOnClick: true 
        }
      );
      
      
      //Unbind sidenav click to close 
      $(function(){
        
    
        $(".drag-target").unbind('click');
        $("#sidenav-overlay").unbind('click');
    });

html,body {
     height: 100%;
     background-color:
    }
    
    header, main, footer, header{
        padding-left: 0 auto;
    }
    
    @media only screen and (max-width : 992px) {
     header, main, footer {
            padding-left: 0;
        }
    }
    
    .rotate90 {
     -ms-transform: rotate(-90deg); 
        -webkit-transform: rotate(-90deg); 
        transform: rotate(-90deg);
    } 
    
    
    .text1 {
     color: #212121;
    }
    
    .text2 {
     color: #757575;
    }
    
    nav.top-nav {
     background-color: #303F9F;
    }
    
    .title-text {
     font-family: Roboto;
     font-weight: bold;
    }
    
    a.bold, .bold {
     font-family: Roboto;
     font-weight: bold;
    }
    
    a.light, .light {
     font-family: Roboto;
     font-weight: normal;
    }
    
    #sidenav-overlay {
     display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
          <header>
             <nav class="top-nav">
                <div class="container">
                   <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
                   <div class="navbar-wrapper">
                      <a href="/index.html" class="brand-logo center">Icy Fire</a>
                   </div>
                </div>
             </nav>
             <ul id="slide-out" class="side-nav">
                <h4 class="title-text center-align">Navigation</h4>
                <div class="divider"></div>
                <li><a href="/user/account.php" class="waves-effect waves-teal bold">Account</a></li>
                <li class="no-padding">
                   <ul class="collapsible collapsible-accordion">
                      <li>
                         <a class="collapsible-header waves-effect waves-teal bold">Pages<i class="material-icons">arrow_drop_down</i></a>
                         <div class="collapsible-body">
                            <a href="/index.html" class="active waves-effect light">Index</a>
                         </div>
                      </li>
                   </ul>
             </ul>
          </header>
       
          <main>
             <div class="container">
                <div class="row">
                   <div class="col s12">
                      <h2 class="indigo-text">Login</h2>
                      <div class="divider"></div>
          
                      <form class="col s12" action="login.php" method="POST">
                         <div class="input-field">
                            <input id="username" type="text" class="validate" name="username" required>
                            <label for="username">Username</label>
                         </div>
                         <div class="input-field">
                            <input id="password" type="password" class="validate" name="password" required>
                            <label for="password">Password</label>
                         </div>
                         <div class="input-field">
                            <input type="checkbox" id="indeterminate-checkbox" name="remember" value="on" />
                            <label for="indeterminate-checkbox">Remember me</label>
                         </div>
          
                         <button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit
          <i class="material-icons right">send</i>
         </button>
         
                      </form>
          <h5 class="indigo-text"><?php getMsg(); ?></h5>
                   </div>
                </div>
             </div>
          </main>
          <footer>
          </footer>
       </body>

在我的网站上：link

Answer 1

这是因为你的拖动目标是拖动目标右边是0，它挡住了你右边的按钮

删除 css 属性

right: 0;

在您的拖动目标元素中

Answer 2

您有一个 <div class="drag-target"> 与菜单一起显示。这覆盖了您的整个表单。您可以通过右键单击提交按钮顶部并单击下拉菜单中的 Inspect Element 来亲自查看。

sidenav 关闭时按钮不起作用

Button not working when sidenav is out

html

javascript

css

jquery

materialize