Question

我正在我网站上的登录页面上工作按钮由于某种原因，当sidenav out（我正在使用物化框架）时，提交按钮无法点击。

我稍微修改了我的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

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

Answer 2

这是因为你的拖拽目标是拖拽 - 目标右边是0阻挡了你的按钮位置是正确的

删除css属性

right: 0;

你的拖拽目标元素

中的

当sidenav外出时按钮不起作用

2 个答案: