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做什么？ –

删除第二个功能，它将工作，并执行隐藏。你的jQuery代码不是你认为的。 –

你告诉你的菜单隐藏和展示在每一次点击

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

卸下秀（）部分将有效地隐藏你的菜单。（但你不能一下就可以把它带回来）

也许你应该尝试visibility或opacity CSS属性来隐藏它，而无需实际改变其display财产

来源

2017-03-17 18:33:10 amenadiel

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

你可以使用toggle函数来为您的目的服务。

来源

2017-03-17 18:38:11

你告诉jQuery来隐藏.Menu然后马上告诉它显示.Menu

我想你想是这样的：

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

当然，你有另外一个问题，因为一旦你隐藏类div的.Menu，你失去了再次显示它的机制。你需要有一个不会隐藏自己的可点击元素作为隐藏和显示的开关。更准确地告诉我们你想要做什么，也许我们可以帮助你编码。

来源

2017-03-17 18:47:22

Woow我完全忘了.show（），甚至没有关注它。

来源

2017-03-17 19:12:05 Cass

JQuery没有链接到HTML？

回答

相关问题