javascript - Jquery：当悬停在菜单项上时，显示文本

Question

我是 JQuery 的新手，但希望在我正在构建的站点中使用它。

当用户使用li类将鼠标悬停在菜单中的某个项目上时hovertriggerssubhead，我想在其下方显示一些文本，这些文本位于 id 的 div 中（嵌套在 li 中）NavSubhead。我已经看过几个这样的例子，即在 JQuery 文档的 FAQ 中的食谱和 JQuery 站点本身的代码中。

这是我的 HTML 代码：

<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 代码中尝试了两种方法来实现这一点；它们如下：

$(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

任何帮助，将不胜感激。谢谢！

更新：我尝试了很多答案，甚至一个有工作演示的答案，但它仍然不起作用，这很奇怪。由于包含表，它是否可能与导航 html 的约束有关？表格具有固定宽度。除此之外，我不知道是什么问题，并且正确引用了 JQuery。提前致谢！

更新 #2：由于我的 HTML 存在一些奇怪的限制，这可能无法正常工作，我将在此处发布。正如你在下面看到的，我也在使用这个幻灯片框架。

<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>&nbsp;&nbsp;</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">&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">&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中。

/* 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;
}

非常感谢您的所有帮助！

score 3 · Accepted Answer

工作演示

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);}
  );

});

注意我已经添加了一个点击事件处理程序来防止演示中锚元素的默认操作

您可能还希望分别在每个事件处理程序中链接 aslideDown()和命令slideUp()之前fade，以使动画更流畅

  $('#Navigation li a').hover(
    function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
    function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
  );

您可能还想看看jQuery 手风琴，它基本上可以完成您在此处所做的工作，但也有一些额外的选项。

编辑：

在您的两次更新之后，我知道问题出在哪里。您使用的幻灯片插件适用于 Mootools JavaScript 框架。此处提供的代码适用于 jQuery JavaScript 框架。虽然在同一页面上的站点上使用这两个框架很好，但两个框架都分配一个对象以$用于选择，并且每种情况下的对象都有不同的方法、属性等。因此，要让两个框架都能工作同时我们需要避免这种冲突。幸运的是，jQuery 有一个命令可以轻松解决这个问题，noConflict()，它将释放$速记以便其他框架可以使用它。请特别注意它必须包含在页面中的顺序。

因此，要使代码正常工作，脚本的结构需要如下所示

<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 类似的效果。

我认为，除非某些特定功能需要绝对必要，否则我会坚持在我的站点中仅使用一个 JavaScript 框架。这不仅避免了冲突，而且通常在一个框架中内置了一些方法来实现另一个框架的功能。即使框架不具有作为核心库的一部分的功能，框架也被设计为可扩展的，因此具有允许开发插件和扩展功能以满足需求的架构。

score 1 · Accepted Answer

这对我有用。不过，您的标记可能应该保持一致，并且在这两种情况下，隐藏文本都出现在其关联链接之后。

$(document).ready(function()
{
    $('.NavSubhead').hide();

    $('li.hovertriggerssubhead').hover(
        function()
        {
            $('.NavSubhead', $(this)).show();
        },
        function()
        {
            $('.NavSubhead', $(this)).hide();
        }
    );
});

score 0 · Accepted Answer

我没有对此进行测试，但我认为它应该可以工作：

$(document).ready(function() {

  //first method
  $(".NavSubhead").hide();

  $('#Navigation li').hover(
    function(){$('div.NavSubhead', this).fadeIn(500);},
    function(){$('div.NavSubhead', this).fadeOut(500);}
  );
}

javascript - Jquery：当悬停在菜单项上时，显示文本

3 回答 3

Related

Reference