Jquery: при наведении на пункт меню отображать текст

Я новичок в JQuery, но хочу использовать его на сайте, который я создаю.

Когда пользователь наводит курсор мыши на элемент меню с классом li hovertriggerssubhead, я хочу отобразить текст под ним, расположенный в div (вложенном внутри li) с идентификатором NavSubhead. Я просмотрел несколько примеров этого, а именно в поваренной книге в FAQ документации JQuery и в коде самого сайта 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;
}

Заранее большое спасибо за вашу помощь!


javascript navigation jquery css hover
person Maxim Zaslavsky    schedule 14.08.2009    source источник
comment
упс, только что заметил опечатку в моем коде... редактирую сообщение, чтобы исправить очень небольшую опечатку, но это еще не решение.   -  person Maxim Zaslavsky    schedule 14.08.2009

Ответы (3)


arrow_upward
3
arrow_downward

Рабочая демонстрация

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

});

Н.Б. Я также добавил обработчик события щелчка, чтобы предотвратить действие по умолчанию для элементов привязки в демоверсии

Вы также можете связать slideDown() и 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, который, по сути, делает то, что вы делаете. здесь, но также имеет некоторые дополнительные параметры.

ИЗМЕНИТЬ:

После обоих ваших обновлений я знаю, в чем проблема. Плагин слайд-шоу, который вы используете, предназначен для JavaScript-фреймворка Mootools. Приведенный здесь код предназначен для фреймворка 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 на своем сайте. Это не только позволяет избежать конфликтов, но обычно в фреймворк встроены способы достижения того, что делает другой фреймворк. Даже если фреймворк не имеет такой функциональности как часть основной библиотеки, фреймворки предназначены для расширения и, как таковые, имеют архитектуру, которая позволяет разрабатывать плагины и расширять функциональность в соответствии с потребностями.

person Russ Cam    schedule 14.08.2009
comment
Я вставил этот код, а также попробовал демо-код, но он все еще не работает, что очень странно. Может ли это быть связано с ограничениями навигационного html из-за охватывающей таблицы? Таблица имеет фиксированную ширину. Кроме этого, я не знаю, в чем проблема, и на JQuery ссылаются правильно. - person Maxim Zaslavsky; 14.08.2009
comment
демо у вас сработало? Правильно ли указан jQuery на вашей странице - вы можете проверить это с помощью простого $(function() { alert(hello); }); который должен вызвать диалоговое окно с предупреждением, когда DOM завершит загрузку. - person Russ Cam; 15.08.2009
comment
Я тоже так думал, но протестировал его с предупреждением, не завернутым в функцию, поэтому я думаю, что оно не проверило его - я собираюсь попробовать это прямо сейчас... - person Maxim Zaslavsky; 15.08.2009
comment
Да, JQuery работает, но только когда не в функции document.ready - правильно ли это? О, и я поместил код, который вы разместили в качестве ответа, в функцию document.ready, но он не работает, даже если вы поместите его за пределы document.ready. Что дает? - person Maxim Zaslavsky; 15.08.2009
comment
Извините, я имею в виду, что приветственное оповещение сработало, но только когда не в document.ready - jquery работает. - person Maxim Zaslavsky; 15.08.2009
comment
Если приветственное оповещение сработало, но не завернуто в готовый документ, это звучит так, как будто ссылка на jQuery неверна, как если бы это было так, оповещение будет работать, завернутое в функцию готовности документа. Используете ли вы другие фреймворки JavaScript? Можете ли вы опубликовать весь код своей страницы (если он не слишком большой)? - person Russ Cam; 15.08.2009
comment
Конечно! Однако у него есть другой код javascript для слайд-шоу с использованием фреймворка. Я обновлю вопрос с кодом. - person Maxim Zaslavsky; 15.08.2009
comment
Большое спасибо за это быстрое и простое решение - в будущем я рассмотрю возможность использования плагина слайд-шоу JQuery. Код noConflict(), который вы опубликовали, творит чудеса. Хорошего дня! - person Maxim Zaslavsky; 15.08.2009

arrow_upward
1
arrow_downward

Это сработало для меня. Вы, вероятно, должны быть последовательны в своей разметке и иметь скрытый текст, отображаемый после связанной с ним ссылки в обоих случаях.

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

    $('li.hovertriggerssubhead').hover(
        function()
        {
            $('.NavSubhead', $(this)).show();
        },
        function()
        {
            $('.NavSubhead', $(this)).hide();
        }
    );
});
person Stephen Curran    schedule 14.08.2009
comment
Спасибо, но у меня возникли проблемы даже с использованием рабочей демонстрации ниже, поэтому, как только я выясню, что происходит, я попробую ваш путь. Спасибо еще раз! - person Maxim Zaslavsky; 14.08.2009

arrow_upward
0
arrow_downward

Я не проверял это, но я думаю, что это должно работать:

$(document).ready(function() {

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

  $('#Navigation li').hover(
    function(){$('div.NavSubhead', this).fadeIn(500);},
    function(){$('div.NavSubhead', this).fadeOut(500);}
  );
}
person Marius    schedule 14.08.2009
comment
Тестирование... заранее спасибо! собираюсь отчитаться о результатах. - person Maxim Zaslavsky; 14.08.2009
comment
Нет, не работает, но все равно за помощь! Тем не менее, на мой неопытный взгляд код выглядит правильно... может ли кто-нибудь просветить меня, почему это тоже не работает? Спасибо! - person Maxim Zaslavsky; 14.08.2009
comment
Извините, я имел в виду, но спасибо за помощь в любом случае, спасибо с ошибкой. - person Maxim Zaslavsky; 14.08.2009