JQueryはHTMLにリンクしていませんか？

-2

JQueryコードが実行されないのはなぜですか？すべてが同じフォルダにあります。私はhtmlとcssファイルと同じフォルダにjquery.jsを持ち、jqueryソースはGoogle CDNからリンクされています。私は間違って何が表示されない...JQueryはHTMLにリンクしていませんか？

.Header { 
 
    height: 75px; 
 
    position: fixed; 
 
    width: 100%; 
 
    background-color: darkslategrey; 
 
    box-shadow: 2px 2px 10px; 
 
    z-index: 5; 
 
} 
 

 
.HeaderText { 
 
    color: white; 
 
    position: absolute; 
 
    font-size: 27px; 
 
    top: 24px; 
 
    left: 20px; 
 
    z-index: 5; 
 
} 
 

 
.Body { 
 
    background-color: darkcyan; 
 
    height: 1200px; 
 
    min-height: 100%; 
 
    position: static; 
 
} 
 

 
.Box { 
 
    height: 300px; 
 
    width: 300px; 
 
    position: relative; 
 
    top: 110px; 
 
    left: 30px; 
 
    background-color: burlywood; 
 
    font-size: 30px; 
 
    box-shadow: 2px 2px 10px black; 
 
    color: white; 
 
    z-index: 0; 
 
} 
 

 
.Menu { 
 
    position: fixed; 
 
    float: right; 
 
    height: 75px; 
 
    width: 150px; 
 
    right: 0; 
 
    background-color: burlywood; 
 
    text-align: center; 
 
} 
 

 
.Menu:hover { 
 
    cursor: pointer; 
 
} 
 

 
.menuItem { 
 
    top: 20px; 
 
    font-size: 30px; 
 
    font-weight: 700; 
 
    color: white; 
 
    position: fixed; 
 
    float: right; 
 
    right: 31px; 
 
} 
 

 
/* General */ 
 

 
* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
@font-face { 
 
    font-family: "Kollektif"; 
 
    src: url(Kollektif.ttf); 
 
} 
 

 
body { 
 
    font-family: Kollektif; 
 
} 
 

 
/* General */

<!DOCTYPE html> 
 
<html lang="en"/> 
 
<html> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <title>Professional looking.</title> 
 
     <meta name="#" content="#"> 
 
     <link rel="stylesheet" href="main.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script> 
 
      $(document).ready(function(){ 
 
       $(".Menu").click(function(){ 
 
        $(".Menu").hide(); 
 
       }); 
 
       $(".Menu").click(function(){ 
 
        $(".Menu").show(); 
 
       }); 
 
      }); 
 
     </script> 
 
    </head> 
 
    <body> 
 
     
 
     <div class="Header"> 
 
      <p class="HeaderText">Professional.</p> 
 
      <div class="Menu"> 
 
       <p class="menuItem">Menu</p> 
 
      </div> 
 
     </div> 
 
     
 
     <div class="Body"> 
 
      <div class="Box"> 
 
       <p>Test</p> 
 
      </div> 
 
     </div> 
 
    </body> 
 
</html>

出典

2017-03-17 Cass

メニューはどのように開いていることがわかりますか？ JavaScriptをクリックするとメニューを開くように指示するだけでなく、メニューを閉じることもできます。 –

Jqueryで何をしようとしていますか？ –

2つ目の機能を削除すると、機能し、非表示になります。あなたのjqueryコードは、あなたが思うものではありません。 –

あなたはすべてのとショーを非表示にするには、メニューを言っている番組を削除

 $(document).ready(function(){ 
      $(".Menu").click(function(){ 
       $(".Menu").hide(); 
      }); 
      $(".Menu").click(function(){ 
       $(".Menu").show(); 
      }); 
     });

をクリックしてください（）部分は効果的にメニューを隠すでしょう。（しかし、あなたはそれを戻すためにそれをクリックすることはできません）

おそらく、あなたが実際にあなたができる

出典

2017-03-17 18:33:10 amenadiel

$(document).ready(function(){ 
    $(".Menu").click(function(){ 
    $(".Menu").toggle(); 
    }); 
});

そのdisplayプロパティを変更することなく、それを隠すためにvisibilityまたはopacity CSSプロパティを試してみてください目的を果たすためにtoggle関数を使用してください。

出典

2017-03-17 18:38:11

あなたは私はあなたがこのような何かしたいと思います.Menu

を表示するために、それを言って、すぐその後、.Menuを隠しするjqueryのを言っている：もちろん

if ($(".Menu").is(":visible")) { 
    $(".Menu").hide(); 
} else { 
    $(".Menu").show(); 
}

を非表示に一度ので、あなたは別の問題を抱えています.Menu class divの場合、再度表示する仕組みが失われます。あなたは、隠れて表示するスイッチになるように自分自身を隠さないクリック可能な要素を持つ必要があります。あなたがしようとしていることをより正確に教えてください。おそらく、何かをコーディングする際に役立つかもしれません。

出典

2017-03-17 18:47:22

私は完全に.show（）について忘れていましたが、それにも注意を払っていませんでした。

出典

2017-03-17 19:12:05 Cass

JQueryはHTMLにリンクしていませんか？

答えて

関連する問題