.toggle（）函數無法正常工作

-5

雖然試圖使用JQuery .toggle（）我沒有運氣，但我試圖爲用戶創建一個註冊/登錄覆蓋層。我看不到任何明顯的問題，並且我所做的任何小小的調整都不成功。.toggle（）函數無法正常工作

HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Photography</title> 
    <meta charset="utf-8"/> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="resources/css/style.css"/> 
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/> 
</head> 
<body> 
    <div class="nav"> 
     <div class="nav-container"> 
      <b>Photography</b><beta>BETA</beta> 
      <div class="nav-options"> 
       <a href="" id="toggle-reg"><i class="icon-user"></i>Register</a> 
       <ul class="register"> 
         Username 
         <input type="text"/> 
         Password 
         <input type="text"/> 
         <button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button> 
       </ul> 
       <a href="">User CP</a> 
       <a href="">Images</a> 
       <a href="">Home</a> 
      </div> 
     </div> 
    </div> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     $('.register').hide(); 
     $('#toggle-reg').click(function() { 
      $('.register').toggle(slow); 
     }); 
    }); 

    </script> 
</body>

CSS：

 .register { 
    background: #fff; 
    padding: 15px; 
    position: absolute; 
    width: 220px; 
    border: 2px solid #f1f1f1; 
    -moz-box-shadow: 0 0 5px #f1f1f1; 
    -webkit-box-shadow: 0 0 5px#f1f1f1; 
    box-shadow: 0 0 5px #f1f1f1; 
    top: 50px; 
}

來源

2013-05-07 user2259473

嘗試'切換（ '慢'）' – karthikr 2013-05-07 21:04:15

究竟是什麼發生或沒有發生？ – 2013-05-07 21:04:55

單擊「註冊」鏈接時不會顯示該列表。改變切換（'慢'）無濟於事。 – user2259473 2013-05-07 21:07:48

你是一個未定義變量稱爲slow調用.toggle()：

$('.register').toggle(slow);

你需要通過串"slow"：

$('.register').toggle("slow");

，您可能需要取消默認的點擊行爲和/或更改鏈接的href=""到href="#"：

$('#toggle-reg').click(function(e) { 
     $('.register').toggle("slow"); 
     e.preventDefault(); 
    });

演示：http://jsfiddle.net/PDaej/1

來源

2013-05-07 21:07:58 nnnnnn

檢查它。

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Photography</title> 
 
    <meta charset="utf-8"/> 
 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
    <script src="http://code.jquery.com/jquery-migrate-1.1.1.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="resources/css/style.css"/> 
 
    <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.css"/> 
 
    <style> 
 
      .register { 
 
    background: #fff; 
 
    padding: 15px; 
 
    position: absolute; 
 
    width: 220px; 
 
    border: 2px solid #f1f1f1; 
 
    -moz-box-shadow: 0 0 5px #f1f1f1; 
 
    -webkit-box-shadow: 0 0 5px#f1f1f1; 
 
    box-shadow: 0 0 5px #f1f1f1; 
 
    top: 50px; 
 
} 
 
    </style> 
 
</head> 
 
<body> 
 
    <div class="nav"> 
 
     <div class="nav-container"> 
 
      <b>Photography</b><beta>BETA</beta> 
 
      <div class="nav-options"> 
 
       <a href="javascript:;" id="toggle-reg"><i class="icon-user"></i>Register</a> 
 
       <ul class="register"> 
 
         Username 
 
         <input type="text"/> 
 
         Password 
 
         <input type="text"/> 
 
         <button class="btn btn-primary">Sign in</button><button class="btn btn-danger">Forgot?</button> 
 
       </ul> 
 
       <a href="">User CP</a> 
 
       <a href="">Images</a> 
 
       <a href="">Home</a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <script type="text/javascript"> 
 
    $(document).ready(function() { 
 
     $('.register').hide(); 
 
     $('#toggle-reg').click(function() { 
 
      $('.register').toggle('slow'); 
 
     }); 
 
    }); 
 

 
    </script> 
 
</body>

來源

2016-01-05 04:41:22

.toggle（）函數無法正常工作

回答

相關問題