Jquery：当悬停在菜单项上时，显示文本 [英] Jquery: When Hover on Menu Item, Display Text
问题描述
我刚开始使用JQuery，但是希望在我正在建立的网站中使用它。
I'm new to JQuery, but wish to use it in a site that I'm building.
当用户在菜单中 li class hovertriggerssubhead ，我想在其下方显示一些文本，位于div（嵌套在li中），ID NavSubhead 。我看了几个例子，即在JOOK文档的常见问题和JQuery网站本身的代码的食谱。
When the user mouses over an item in the menu with li class hovertriggerssubhead, I want to display some text below it, located in the div (nested inside the li) with id NavSubhead. I have looked at several examples of this, namely in the cookbook in the FAQ of the JQuery documentation and the code of the JQuery site itself.
这是我的HTML代码：
This is my HTML code:
<div id="Navigation">
<ul>
<li class="current">
<a href="index.html">Home</a></li>
<li class="hovertriggerssubhead">
<a href="gallery.html">Gallery</a>
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
</li>
<li class="hovertriggerssubhead">
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
<a href="contact.html">Contact</a></li>
</ul>
</div>
我在我的JQuery代码中尝试了两种方法：它们如下：
I tried two methods of accomplishing this in my JQuery code; they are below:
$(document).ready(function() {
//first method
$(".NavSubhead").hide();
$('#Navigation li').hover(
function(){$(this).find('div.NavSubhead:hidden').fadeIn(500);},
function(){$(this).find('div.NavSubhead:visible').fadeOut(500);}
);
//second method
$("#Navigation li div").hide();
$("#Navigation li.hovertriggerssubhead").hover(
function () {
$(this).children("div.NavSubhead").show();
},function(){
$(this).children("div.NavSubhead").hide();
});//hover
});// document ready
任何帮助将不胜感激。非常感谢！
Any help would be appreciated. Thanks!
UPDATE ：我尝试了许多答案，甚至有一个工作演示，但它仍然不工作，这是很奇怪。它可以通过任何机会与导航html的约束相关，因为一个包围的表？该表具有固定的宽度。除此之外，我不知道是什么问题，并且JQuery被正确引用。提前感谢！
UPDATE: I've tried numerous answers, even one with a working demo, but it still doesn't work, which is very weird. Could it be related by any chance to constraints of the navigation html because of an encompassing table? The table has a fixed width. Other than that, I don't know what is the problem, and JQuery is referenced correctly. Thanks in advance!
UPDATE＃2 ：由于我的HTML可能有些奇怪的限制， 要把它张贴在这里。如下图所示，我也使用这个幻灯片框架。
UPDATE #2: As it's possible that this is not working because of some weird constraints in regards to my HTML, I'm going to post it here. As you can see below, I'm using this Slideshow framework too.
<html>
<head>
<title>MZ Photography</title>
<!-- Jquery Stuff -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
/*
$(function() {
$("div.NavSubhead").hide();
$('#Navigation li a').hover(
function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
);
});
*/
$(function() {
/* hacky nav highlighting */
var loc = window.location.href;
//strip the existing current state
$('#Navigation .current').removeClass('current');
//add class to current section...
//Home
if(loc.indexOf('MZPhotography.html') > -1){
$('#Navigation #home').addClass('current');
}
//Gallery
else if(loc.indexOf('gallery') > -1){
$('#Navigation #gallery').addClass('current');
}
//Contact
else if(loc.indexOf('contact.html') > -1){
$('#Navigation #contact').addClass('current');
}
});
$(document).ready(function() {
$("div.NavSubhead").hide();
$('#Navigation li a').hover(
function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
);
});
</script>
<!-- End jquery stuff -->
<!-- Slideshow stuff begins here -->
<link rel="stylesheet" type="text/css" href="css/slideshow.css" media="screen" />
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slideshow.js"></script>
<script type="text/javascript">
//<![CDATA[
window.addEvent('domready', function(){
var data = {
'30.jpg': { caption: '' },
'25.jpg': { caption: '' },
'21.jpg': { caption: '' },
'16.jpg': { caption: '' },
'11.jpg': { caption: '' },
'13.jpg': { caption: '' },
'12.jpg': { caption: '' },
'9.jpg': { caption: '' },
'4.jpg': { caption: '' },
'2.jpg': { caption: '' },
'3.jpg': { caption: '' },
'6.jpg': { caption: '' },
'7.jpg': { caption: '' },
'14.jpg': { caption: '' },
'8.jpg': { caption: '' },
'10.jpg': { caption: '' },
'15.jpg': { caption: '' },
'17.jpg': { caption: '' },
'22.jpg': { caption: '' },
'28.jpg': { caption: '' },
'26.jpg': { caption: '' },
'27.jpg': { caption: '' },
'24.jpg': { caption: '' },
'23.jpg': { caption: '' },
'19.jpg': { caption: '' },
'18.jpg': { caption: '' },
'20.jpg': { caption: '' },
'29.jpg': { caption: '' },
'31.jpg': { caption: '' },
'32.jpg': { caption: '' },
'1.jpg': { caption: '' },
'5.jpg': { caption: '' },
'33.jpg': { caption: '' },
'34.jpg': { caption: '' },
'35.jpg': { caption: '' },
'36.jpg': { caption: '' }
};
var myShow = new Slideshow('show', data, {controller: true, height: 450, hu: 'images/', thumbnails: false, width: 600});
});
//]]>
</script>
<!-- end Slideshow -->
<link rel="stylesheet" href="site.css">
</head>
<body>
<table width="980"> <!--980 -->
<tr>
<td width="880">
<table width="880"> <!--880-->
<tr>
<td align="left">
<div id="logo">
<img src="images/title.png" />
</div>
</td>
<td align="right"><!--MENU-->
<div id="Navigation">
<ul>
<li id="home" class="current">
<a href="#top">Home</a></li>
<li id="gallery" class="hovertriggerssubhead">
<a href="gallery.html">Gallery</a>
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
</li>
<li id="contact" class="hovertriggerssubhead">
<a href="contact.html">Contact</a></li>
<div class="NavSubhead">
<p class="navsubheadtext">Under Construction</p>
</div>
</ul>
</div>
</td>
</tr>
</table>
<table width="700">
<tr><td><br></td></tr>
<tr>
<!-- we don't rly need this -->
<!-- How about about section here? -->
<td align="left" id="tdAbout">
<!--Recent Changes --> <!-- NM -->
<div id="aboutDiv">
<p class="yellowboxtransparent" id="about">
Welcome to MZ's personal photography site. Here, you will find galleries of some of his photos, by pressing the Galleries link at the top right hand side of the page. Enjoy!
</p>
</div>
<!-- About --> </td>
<td> </td>
<td align="center">
<!--Slideshow-->
<div align="center" id="show" class="slideshow">
<img src="images/1.jpg" alt="" />
</div>
</td>
<td align="right">
</td>
</tr>
<tr><td><br><br></td></tr>
<tr><!--<td align="left"> -->
<!--Copyright Statement-->
<!--<p class="copy">© Copyright 2009 by MZ. <br/>All Rights Reserved. </p>
</td><td align="right"><!--Links--><!--</td>--></tr></table>
</td>
<td><!--Right hand column -->
<div id="meDiv">
<p class="blueboxtransparent">
hi
</p>
</div>
</td>
</tr>
</table>
<br/><br/><br/><br/><br/>
<!-- Beneath -->
<div id="bottom">
<div class="leftfloat" id="divCopy">
<!--Copyright Statement-->
<p class="copy">© Copyright 2009 by MZ. All Rights Reserved. </p>
</div>
<div class="rightfloat" id="divLinks">
<ul id="linklist">
<li><a href="http://absolutely2nothing.wordpress.com">Blog</a></li>
<li><a href="http://twitter.com/maximz2005">Twitter - @maximz2005</a></li>
</ul>
</div>
</div>
</body>
</html>
下面是我的css，在 site.css >
The below is my css, in site.css.
/* CSS for MZ Photography site. Coypright 2009 by MZ, All Rights Reserved. */
p.copy { color:#ffffff; font-face:Helvetica,Calibri,Arial; font-size:12; font-style:italic;}
.leftfloat { float: left; }
.rightfloat { float: right; }
body {
font: 12px/1.5 Helvetica, Arial, "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif!important;
color: #ffffff;
background: #000000; }
#about { color: #3399FF; } /* #666 */
h1 { font: Helvetica, "Comic Sans MS", "Arial Rounded MT Bold", Tahoma, "Times New Roman"; font-size: 32pt; color: #339; }
h2 { font: Helvetica, Arial; font-size: 18pt; color: #666; }
a.hover { background-color:#666; color:#ffffff; }
#tdAbout { width:25 }
#nav { float:right }
#linklist
{
font-family: Calibri, Helvetica, Comic Sans MS, Arial, sans-serif;
list-style-type:circle;
white-space:nowrap;
}
#linklist li
{
display:inline
}
/* Warnings/Alerts */
.warning, .alert, .yellowbox {
padding: 6px 9px;
background: #fffbbc;
border: 1px solid #E6DB55;
}
.yellowboxtransparent, .warningtransparent, .alerttransparent {
padding:6px 9px;
border: 1px solid #E6DB55;
}
/* Errors */
.error, .redbox {
padding: 6px 9px;
background: #ffebe8;
border: 1px solid #C00;
}
.redboxtransparent, .errortransparent{
padding: 6px 9px;
border: 1px solid #C00;
}
/* Downloads */
.download, .greenbox {
padding: 6px 9px;
background: #e7f7d3;
border: 1px solid #6c3;
}
.greenboxtransparent, .downloadtransparent {
padding: 6px 9px;
border: 1px solid #6c3;
}
/*Info Box */
.bluebox, .info{
padding: 6px 9px;
background: #FFFF33;
border: 2px solid #3399FF;
color: 000000;
}
.blueboxtransparent, .infotransparent{
padding: 6px 9px;
border: 1px solid #3399FF;
}
a:link {
COLOR: #DC143C; /* #0000FF */
}
a:visited {
COLOR: #DC143C; /* #800080 */
}
a:hover { color: #ffffff; background-color: #00BFFF; }
}
a:active { color: #ffffff; background-color: #00BFFF; }
/*Navigation*/
#Navigation {
float: right;
background: #192839 url(images/bg_nav_left.gif) left bottom no-repeat;
}
#Navigation ul {
float: left;
background: url(images/bg_nav_right.gif) right bottom no-repeat;
padding: 0 .8em 2px;
margin: 0;
}
#Navigation li {
float: left;
list-style: none;
margin: 0;
background: none;
padding: 0;
}
#Navigation li a {
float: left;
padding: 0 1em;
line-height: 25px;
font-size: 1.2em;
color: #D0D0D0;
text-decoration: none;
margin-bottom: 2px;
}
#Navigation li.current a, #Navigation li.current a:hover {
border-bottom: 2px solid #176092;
background: #192839;
margin-bottom: 0;
cursor: default;
color: #D0D0D0;
}
#Navigation li a:hover {
color: #fff;
border-bottom: 2px solid #4082ae;
margin-bottom: 0;
}
#Navigation li.current a, #Navigation li.current a:hover {
border-bottom: 2px solid #176092;
background: #192839;
margin-bottom: 0;
cursor: default;
color: #D0D0D0;
}
非常感谢您的帮助！
推荐答案
jQuery代码
$(function() {
$("div.NavSubhead").hide();
$('#Navigation li a').hover(
function(){$(this).next().stop(false, true).fadeIn(500);},
function(){$(this).next().stop(false, true).fadeOut(500);}
);
});
N.B。我已添加了一个点击事件处理程序，以防止在演示中对锚点元素执行默认操作。
您可能还想链接<$ c $在每个事件处理程序中的 fade 命令之前执行c> slideDown（）和 slideUp（） ，以使动画更流畅
You may also want to chain in a slideDown() and slideUp() before the fade command in each event handler, respectively, to make the animation smoother
$('#Navigation li a').hover(
function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
);
您还可以查看 jQuery accordion ，它基本上做你在这里做的，但也有一些额外的选项。
You may also want to take a look at the jQuery accordion, which essentially does what you are doing here, but has some additional options too.
编辑：
在两次更新后，我知道问题是什么。您使用的幻灯片插件是Mootools JavaScript框架。这里提供的代码是用于jQuery JavaScript框架。虽然在同一页面上同时使用两个框架都可以，但是两个框架都分配一个对象到 $ 来选择，每个对象都有不同的方法，属性等。所以，为了让两个框架同时工作，我们需要避免这种冲突。幸运的是，jQuery有一个命令可以轻松解决这个问题， noConflict（） ，这将释放 $ 速记，以便其他框架可以使用它。请特别注意其必须包含在网页中的顺序。
After both of your updates, I know what the problem is. The slideshow plugin that you are using is for the Mootools JavaScript framework. The code supplied here is for the jQuery JavaScript framework. Whilst it is fine to use both frameworks on your site on the same page, both frameworks assign an object to $ to use for selection, and the object in each case has different methods, properties, etc. So, to get both frameworks to work at the same time we need to avoid this conflict. Luckily, jQuery has a command to easily get around this, noConflict(), which will release the $ shorthand so that other frameworks can use it. Take particular note of the order in which it must be included in a page.
为了让代码正常工作，脚本的结构将需要如下
So to get the code working, the structure of the scripts will need to be as follows
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
// you can assign the jQuery object to another name if you want. Just
// use var $j = jQuery.noConflict() and then can use $j() for jQuery object.
jQuery.noConflict();
// now your jQuery stuff comes here
// there are a couple of techniques that can be used so that you can use the $
// shorthand with jQuery library. I'll show you one here using a self-invoking
// anonymous function that takes one parameter, $, into which we will pass the
// the jQuery object
(function($) {
$(function() {
$("div.NavSubhead").hide();
$('#Navigation li a').hover(
function(){$(this).next().stop(false, true).fadeIn(500);},
function(){$(this).next().stop(false, true).fadeOut(500);}
);
});
})(jQuery);
// now put the Mootools script and relevant slideshow script.
<script src="....." ></script>
....
有很多伟大的幻灯片和灯箱插件jQuery 提供类似的效果，Mootools一个，你已经链接到。
There are plenty of great slideshow and lightbox plugins for jQuery that offer similar effects to the Mootools one that you have linked to.
我认为，除非对某些特定的功能需要有绝对的需要，我坚持在我的网站只使用一个JavaScript框架。这不仅避免了冲突，而且通常还有一些方法构建在实现另一个框架的框架中。即使一个框架没有这个功能作为核心库的一部分，框架被设计为可扩展的，因此，有一个架构，允许开发插件和扩展功能，以满足一些需求。
I'm of the opinion that, unless absolutely necessary for some specific functional need, I stick to using just one JavaScript framework in my site. Not only does this avoid conflicts, but there are usually ways built into a framework of achieving what another framework does. Even if a framework does not have that functionality as part of the core library, frameworks are designed to be extensible and as such, have an architecture that allows one to develop plugins and extend functionality to fit ones needs.
这篇关于Jquery：当悬停在菜单项上时，显示文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
