2017-01-17 7 views
0

スライドアウトメニューを作成しようとしていますが、netbeansは構文が正しくないと判断し続けます。スライドアウトメニューが機能しない、NetBeansで構文エラーが表示され続ける

コンソールが表示されますにReferenceError:jQueryのが定義されていない[ミーア情報] navbar.js:16:1

上記のファイルは、私はすべてのページに含まれているメニューのPHPファイルです。

エラーの原因を特定できません。

$(document).ready(function(){ 
 
    $(".fa-times").click(funtion(){ 
 
     $(".sidebar_menu").addClass("hide_menu"); 
 
     $(".toggle_menu").addClass("opacity_one"); 
 
     
 
      });  
 
      $(".toggle_menu").click(funtion(){ 
 
     $(".sidebar_menu").removeClass("hide_menu"); 
 
     $(".toggle_menu").removeClass("opacity_one"); 
 
       
 
      }); 
 
});
/* menu 2 */ 
 
.toggle_menu{ 
 
    position:fixed; 
 
    padding: 15px 20px 15px 15px; 
 
    margin-top: 70px; 
 
    color:white; 
 
    cursor: pointer; 
 
    background-color:#648b79; 
 
    z-index:1000000; 
 
    font-size:2em; 
 
    opacity:0; 
 
} 
 
.sidebar_menu{ 
 
    position:fixed; 
 
    width:250px; 
 
    margin-left:0px; 
 
    overflow:hidden; 
 
    height:100vh; 
 
    max-height:100vh; 
 
    background-color: rgba(17, 17, 17, 0.9); 
 
    opacity:0.9; 
 
    transition: all 0.3s ease-in-out;  
 
} 
 
.fa-times{ 
 
    right:10px; 
 
    top:10px; 
 
    opacity:0.7; 
 
    cursor: pointer; 
 
    position:absolute; 
 
    color:white; 
 
    transition: all 0.3s ease-in-out;  
 
} 
 
.fa-times:hover{ 
 
    opacity:1; 
 
} 
 
.boxed_item{ 
 
    font-family: 'Open Sans'; 
 
    font-weight: 200; 
 
    padding: 10px 20px; 
 
    display:inline-block; 
 
    border: solid 2px white; 
 
    box-sizing: border-box; 
 
    font-size: 22px; 
 
    color:white; 
 
    text-align:center; 
 
    margin-top:70px;  
 
} 
 
.logo_bold{ 
 
    font-weight: 800; 
 
} 
 
.logo_title{ 
 
    color:white; 
 
    font-family: 'Open Sans'; 
 
    font-weight: 200; 
 
    font-size: 12px; 
 
    text-align: center; 
 
    padding: 5px 0; 
 
} 
 
.navigation_selection{ 
 
    margin: 20px 0; 
 
    display:block; 
 
    width:200px; 
 
    margin-left: 25px; 
 
} 
 
.navigation_item{ 
 
    font-weight: 200; 
 
    font-family: 'Open Sans'; 
 
    color:white; 
 
    padding: 12px 0; 
 
    box-sizing:border-box; 
 
    font-size: 14px; 
 
    color:#D8D8D8; 
 
    border-bottom: solid 1px #d8d8d8; 
 
    transition: all 0.3s ease-in-out; 
 
    cursor:pointer; 
 
} 
 
.boxed_item_smaller{ 
 
    font-size: 12px; 
 
    color:#D8D8D8; 
 
    width:200px; 
 
    transition: all 0.3s ease-in-out; 
 
cursor: pointer; 
 
border-width:1px; 
 
margin:0 0 20px 0; 
 
} 
 
.boxed_item_smaller:hover{ 
 
background-color:white; 
 
color:#111; 
 
    transition: all 0.3s ease-in-out; 
 
} 
 
.hide_menu{ 
 
    margin-left:-250px; 
 
} 
 
.opacity_one{ 
 
    opacity:1; 
 
    transition: all 0.3s ease-in-out; 
 
}
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<link rel="stylesheet" href="style.css" type="text/css"> 
 
<script src="scriptsm.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 
 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
</head> 
 

 
<body> 
 
<i class="fa fa-bars toggle_menu"></i> 
 
    <div class="sidebar_menu"> 
 
     <i class="fa fa-times"></i> 
 
\t \t \t <center> 
 
\t \t \t \t <a href="#"><h1 class="boxed_item">robby<span class="logo_bold">test</span></h1></a> 
 
\t \t \t \t <h2 class="logo_title">test</h2> 
 
\t \t \t </center> 
 
     
 
     <ul class="navigation_selection"> 
 
      <li class="navigation_item"> ? </li> 
 
      <li class="navigation_item"> ? </li> 
 
      <li class="navigation_item"> ? </li> 
 
      <li class="navigation_item"> ? </li> 
 
      <li class="navigation_item"> ? </li> 
 
      <li class="navigation_item"> ? </li> 
 
     </ul> 
 
\t \t \t <center> 
 
\t \t \t \t <a href="#"><h1 class="boxed_item boxed_item_smaller"> 
 
       <i class="fa fa-user"></i>??</h1></a> 
 
\t \t \t </center> 
 
    </div> 
 
</body> 
 
</html>

答えて

1

あなたのhtmlが無効のthatsですjqueryのがロードされていない理由です。あなたが不足している

>スクリプトタグ

<script src="http://code.jquery.com/jquery-1.10.1.min.js"</script> 

のsrc属性の後には、第二の問題は、クリックイベントに機能の間違ったスペルである

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

でなければなりません。

$(document).ready(function() { 
    $(".fa-times").click(function() { 
    $(".sidebar_menu").addClass("hide_menu"); 
    $(".toggle_menu").addClass("opacity_one"); 

    }); 
    $(".toggle_menu").click(function() { 
    $(".sidebar_menu").removeClass("hide_menu"); 
    $(".toggle_menu").removeClass("opacity_one"); 
    }); 
}); 
+0

コピー貼り付けの必要がありますが、まだ動作していないことを確認してください。 –

+0

@RobbyMoralesはアップデートをチェックします。クリック事象機能が綴られていなかった。この修正後は完全に動作します。 – Deep

+0

@RobbyMoralesは解決された問題ですか? – Deep

関連する問題