gpt4 book ai didi

javascript - 为什么 jQuery 函数 showHide() 未定义?

转载 作者:行者123 更新时间:2023-11-28 19:42:23 27 4
gpt4 key购买 nike

我在尝试使用 jQuery 方面确实很陌生,所以请原谅我问一个可能很简单的问题。也许它甚至与 jQuery 无关,但无论如何,这就是场景。我正在尝试放入一个隐藏的 div,仅当用户将鼠标悬停在页面上学习者的 anchor 标记上时才显示该 div。我一开始只使用一个 anchor 标记,以便在实现其余标记之前先使其工作。我已经下载了一个 jQuery 库并包含了对它的引用,因此以下是我在页面的头部部分中获得的一些内容:

<script src="js/jquery-1.11.1.js" type="text/javascript" ></script>
<style type="text/css">
#navcontainer ul { list-style-type: none; }
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
text-decoration:none;
padding: .2em 1em;
}
</style>

接下来,我定义了一个无序列表,使用上面的样式使其水平,并且在它后面有一个隐藏的 div,当用户将鼠标移到无序列表中的第一个 anchor 上时,我想显示它列表。以下是 body 标记中的相关 HTML:

<body>
<div id="navcontainer">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#" onmouseout="showHide('dropdown1', false)" onmouseover="showHide('dropdown1', true); return false;">Learners</a></li>
<li><a href="#">Teachers</a></li>
<li><a href="#">Businesses</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li><a href="PDFs/Learners/CloStringMap.pdf">Description A</a></li>
<li><a href="PDFs/Learners/VlaStringMap.pdf">Description B</a></li>
<li><a href="PDFs/Learners/VlnStringMap.pdf">Description C</a></li>
</ul>
</div>
<!-- other HTML code -->
</body>

但是,当我从浏览器(IE11)中运行它时,什么也没有发生。使用 IE11 内置的 F12 Web 开发人员工具,我发现它给出了“showHide is undefined”错误。它为什么要这么做? showHide() 函数肯定位于 jquery-1-11.1.js 文件中,该文件肯定位于我的 js 文件夹中。我做错了什么,或者没有考虑到什么?

最佳答案

jQuery 的工作方式与此有点不同。你必须让它看起来像这样:

$("#dropdown1").toggle()

你最好创建一个 javascript 文件并将 JS 与 HTML 分开:

HTML:

<body>
<div id="navcontainer">
<ul>
<li><a href="index.htm">Home</a></li>
<li><a href="#dropdown1">Learners</a></li>
<li><a href="#">Teachers</a></li>
<li><a href="#">Businesses</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="dropdown1" style="visibility:hidden;">
<ul>
<li><a href="PDFs/Learners/CloStringMap.pdf">Description A</a></li>
<li><a href="PDFs/Learners/VlaStringMap.pdf">Description B</a></li>
<li><a href="PDFs/Learners/VlnStringMap.pdf">Description C</a></li>
</ul>
</div>
<!-- other HTML code -->
</body>

JS

$(function(){
$("#navcontainer li a").click(function(){
if( this.href.indexOf("#") != -1 ) {
$( $(this).attr("href") ).toggle(); // $( "#container1" )
}
});
});

它的作用是在 navcontainer li 单击时,我们创建一个处理程序,如果它包含 #,它就会执行某些操作。然后我们选择 href 中的元素 #container1 ,也是我们要显示的元素的选择器。然后我们切换该元素。

关于javascript - 为什么 jQuery 函数 showHide() 未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24842979/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com