如何从 CDN 和 HTML 代码中的 JS 脚本 link jQuery
How to link jQuery from a CDN and a JS script in HTML code
我很清楚这是一个有点白痴的问题，但我对 JS 和 JQuery 以及如何 link 它到 HTML 代码还很陌生，但是 none 的相似线程导致了解决方案。
奇迹般地，我发现并修改了一些 JSFiddle 代码：https://jsfiddle.net/z7L2re8j/
现在，我正在尝试从 CDN 加载 JQuery，我还有一个 JS 文件，其中包含使 HTML（和 CSS）正常工作的函数.
HTML的文件头：
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/icon.webp">
<link rel="stylesheet" href="./new.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script>
<script type="text/javascript" src="./old.js"></script>
</head>
<body>
<!-- Html body -->
</body>
</html>
文件old.js和new.css本质上是编写在JSFiddlelink中相应选项卡上的代码。
但是，当我 运行 带有 link 的 HTML 代码时，如您所见，它与 JSFiddle 中的预览不同。而且我不知道我做错了什么。
那么，我 link 是否正确地处理了文件，如果没有，我的错误是什么？
提前致谢
如果您的问题是如何 link 到 old.js 和 new.css，请查看网络选项卡并查看浏览器在哪里寻找它们
要将 CDN 用于 jQuery 和 Bootstrap 并从 JSFiddle 获取该信息，您可以这样做：
- 在 JSFiddle
中点击 资源
右击 links 并在新标签页中打开，你会看到它们是 Bootstrap v3.3.7
转到 https://getbootstrap.com/docs/5.0/getting-started/introduction/ and get the latest or search google first for bootstrap CDN: I found for example https://www.bootstrapcdn.com/ 然后您可以从那里获取您 want/need
的版本
备选方案，因为我可以看到您的 JSFiddle 与 bootstrap 5 不兼容：
https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
$('ul.nav li.dropdown').hover(function() {
var first = $(this).find('.dropdown-menu')[0];
$(first).stop(true, true).delay(20).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#secondary').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#third').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#fourth').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
.navbar .sub-menu: before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu: after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
}
.navbar-toggle {
z-index: 3;
}
nav.navbar i.fa {
padding-left: 5px;
padding-right: 5px;
}
ul.nav li:hover>ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display: none;
margin-top: -1px;
}
#navbar-collapse-new.navbar-collapse {
padding-top: 0px;
padding-right: 38px;
}
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-new">
<ul class="nav navbar-nav navbar-left" role="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Villas <b class="caret"></b></a>
<ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false">
<li id="secondary" role="menuitem"><a href="#">1 Bedroom Villas</a>
<ul class="dropdown-menu sub-menu" role="menu">
<li id="tertiary" role="menuitem">
<a title="Fig Tree Villa" class="tertiary-link" href="/geonext/myhome.geo">Fig Tree Villa</a>
</li>
<li role="menuitem">
<a title="Mulberry Villa" class="tertiary-link" href="/geonext/myhome.geo">Mulberry Villa</a>
</li>
<li role="menuitem">
<a title="Grapevine Villa" class="tertiary-link" href="/geonext/myhome.geo">Grapevine Villa</a>
</li>
</ul>
</li>
<li id="third" role="menuitem"><a href="#">2 Bedroom Villas</a>
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Bougainvillea Villa" class="tertiary-link" href="/geonext/myhome.geo">Bougainvillea Villa</a>
</li>
<li role="menuitem">
<a title="Margarita Villa" class="tertiary-link" href="/geonext/myhome.geo">Margarita Villa</a>
</li>
<li role="menuitem">
<a title="Oleander Villa" class="tertiary-link" href="/geonext/myhome.geo">Oleander Villa</a>
</li>
<li role="menuitem">
<a title="Violeta Villa" class="tertiary-link" href="/geonext/myhome.geo">Violeta Villa</a>
</li>
</ul>
</li>
<li id="fourth" role="menuitem"><a href="#">3 Bedroom Villas</a>
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Jasmin Villa" class="tertiary-link" href="/geonext/myhome.geo">Jasmin Villa</a>
</li>
<li role="menuitem">
<a title="Lemoni Villa" class="tertiary-link" href="/geonext/myhome.geo">Lemoni Villa</a>
</li>
<li role="menuitem">
<a title="Mandarin Villa" class="tertiary-link" href="/geonext/myhome.geo">Mandarin Villa</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<a href="#" class="navbar-brand"> Contact Us</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>
我很清楚这是一个有点白痴的问题，但我对 JS 和 JQuery 以及如何 link 它到 HTML 代码还很陌生，但是 none 的相似线程导致了解决方案。
奇迹般地，我发现并修改了一些 JSFiddle 代码：https://jsfiddle.net/z7L2re8j/
现在，我正在尝试从 CDN 加载 JQuery，我还有一个 JS 文件，其中包含使 HTML（和 CSS）正常工作的函数.
HTML的文件头：
<html>
<head>
<meta charset="UTF-8">
<link rel="icon" href="images/icon.webp">
<link rel="stylesheet" href="./new.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"> </script>
<script type="text/javascript" src="./old.js"></script>
</head>
<body>
<!-- Html body -->
</body>
</html>
文件old.js和new.css本质上是编写在JSFiddlelink中相应选项卡上的代码。
但是，当我 运行 带有 link 的 HTML 代码时，如您所见，它与 JSFiddle 中的预览不同。而且我不知道我做错了什么。
那么，我 link 是否正确地处理了文件，如果没有，我的错误是什么？
提前致谢
如果您的问题是如何 link 到 old.js 和 new.css，请查看网络选项卡并查看浏览器在哪里寻找它们
要将 CDN 用于 jQuery 和 Bootstrap 并从 JSFiddle 获取该信息，您可以这样做：
- 在 JSFiddle 中点击 资源
右击 links 并在新标签页中打开，你会看到它们是 Bootstrap v3.3.7
转到 https://getbootstrap.com/docs/5.0/getting-started/introduction/ and get the latest or search google first for bootstrap CDN: I found for example https://www.bootstrapcdn.com/ 然后您可以从那里获取您 want/need
的版本
备选方案，因为我可以看到您的 JSFiddle 与 bootstrap 5 不兼容：
https://blog.getbootstrap.com/2016/07/25/bootstrap-3-3-7-released/
$('ul.nav li.dropdown').hover(function() {
var first = $(this).find('.dropdown-menu')[0];
$(first).stop(true, true).delay(20).fadeIn();
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#secondary').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#third').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
$('ul.nav li#fourth').hover(function() {
console.log("reached sub here 1");
$(this).find('.sub-menu').stop(true, true).delay(20).fadeIn();
console.log($(this).find('.sub-menu'));
}, function() {
$(this).find('.sub-menu').stop(true, true).delay(20).fadeOut();
});
.navbar .sub-menu: before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu: after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
}
.navbar-toggle {
z-index: 3;
}
nav.navbar i.fa {
padding-left: 5px;
padding-right: 5px;
}
ul.nav li:hover>ul.dropdown-menu {
display: block;
}
#navbar {
text-align: center;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
display: none;
margin-top: -1px;
}
#navbar-collapse-new.navbar-collapse {
padding-top: 0px;
padding-right: 38px;
}
<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous">
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-default" role="navigation" aria-label="Main Menu">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-new">
<ul class="nav navbar-nav navbar-left" role="menu">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Villas <b class="caret"></b></a>
<ul class="dropdown-menu" id="secondaryMenu" role="menu" aria-expanded="false">
<li id="secondary" role="menuitem"><a href="#">1 Bedroom Villas</a>
<ul class="dropdown-menu sub-menu" role="menu">
<li id="tertiary" role="menuitem">
<a title="Fig Tree Villa" class="tertiary-link" href="/geonext/myhome.geo">Fig Tree Villa</a>
</li>
<li role="menuitem">
<a title="Mulberry Villa" class="tertiary-link" href="/geonext/myhome.geo">Mulberry Villa</a>
</li>
<li role="menuitem">
<a title="Grapevine Villa" class="tertiary-link" href="/geonext/myhome.geo">Grapevine Villa</a>
</li>
</ul>
</li>
<li id="third" role="menuitem"><a href="#">2 Bedroom Villas</a>
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Bougainvillea Villa" class="tertiary-link" href="/geonext/myhome.geo">Bougainvillea Villa</a>
</li>
<li role="menuitem">
<a title="Margarita Villa" class="tertiary-link" href="/geonext/myhome.geo">Margarita Villa</a>
</li>
<li role="menuitem">
<a title="Oleander Villa" class="tertiary-link" href="/geonext/myhome.geo">Oleander Villa</a>
</li>
<li role="menuitem">
<a title="Violeta Villa" class="tertiary-link" href="/geonext/myhome.geo">Violeta Villa</a>
</li>
</ul>
</li>
<li id="fourth" role="menuitem"><a href="#">3 Bedroom Villas</a>
<ul class="dropdown-menu sub-menu" role="menu">
<li role="menuitem">
<a title="Jasmin Villa" class="tertiary-link" href="/geonext/myhome.geo">Jasmin Villa</a>
</li>
<li role="menuitem">
<a title="Lemoni Villa" class="tertiary-link" href="/geonext/myhome.geo">Lemoni Villa</a>
</li>
<li role="menuitem">
<a title="Mandarin Villa" class="tertiary-link" href="/geonext/myhome.geo">Mandarin Villa</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<a href="#" class="navbar-brand"> Contact Us</a>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</body>
</html>