2016-09-19 209 views
0

我正在工作在我的网站上的登录页面按钮出于某种原因提交按钮不可点击时sidenav出(我使用物化框架)。sidenav不工作时按钮不工作

我已经修改了一下我的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 { 
 
    \t height: 100%; 
 
    \t background-color: 
 
    } 
 
    
 
    header, main, footer, header{ 
 
     padding-left: 0 auto; 
 
    } 
 
    
 
    @media only screen and (max-width : 992px) { 
 
    \t header, main, footer { 
 
      padding-left: 0; 
 
     } 
 
    } 
 
    
 
    .rotate90 { 
 
    \t -ms-transform: rotate(-90deg); 
 
     -webkit-transform: rotate(-90deg); 
 
     transform: rotate(-90deg); 
 
    } 
 
    
 
    
 
    .text1 { 
 
    \t color: #212121; 
 
    } 
 
    
 
    .text2 { 
 
    \t color: #757575; 
 
    } 
 
    
 
    nav.top-nav { 
 
    \t background-color: #303F9F; 
 
    } 
 
    
 
    .title-text { 
 
    \t font-family: Roboto; 
 
    \t font-weight: bold; 
 
    } 
 
    
 
    a.bold, .bold { 
 
    \t font-family: Roboto; 
 
    \t font-weight: bold; 
 
    } 
 
    
 
    a.light, .light { 
 
    \t font-family: Roboto; 
 
    \t font-weight: normal; 
 
    } 
 
    
 
    #sidenav-overlay { 
 
    \t 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> 
 
    \t 
 
      <main> 
 
      <div class="container"> 
 
       <div class="row"> 
 
        <div class="col s12"> 
 
         <h2 class="indigo-text">Login</h2> 
 
         <div class="divider"></div> 
 
    \t \t \t \t 
 
         <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> 
 
    \t \t \t \t \t 
 
         <button class="btn waves-effect waves-light blue right" type="submit" name="action">Submit 
 
    \t \t \t \t \t \t <i class="material-icons right">send</i> 
 
    \t \t \t \t \t </button> 
 
    \t \t \t \t \t 
 
         </form> 
 
    \t \t \t \t <h5 class="indigo-text"><?php getMsg(); ?></h5> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      </main> 
 
      <footer> 
 
      </footer> 
 
     </body>

这是在我的网站:link

+0

不要忘记标记其中一个答案是正确的。 – Soviut

回答

1

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

enter image description here

+0

谢谢你指出。我尝试将高度/宽度设置为0,但现在无法关闭移动设备上的导航菜单。任何想法如何解决它,仍然能够在移动关闭它? – Adrian

0

那是因为你拖动目标是拖靶右边是0,这阻挡了您的按钮,这是位置向右

删除css属性 删除css属性

在您的拖曳目标元素中