javascript - Jquery: メニュー項目にカーソルを合わせると、テキストが表示されます

Question

JQuery は初めてですが、構築中のサイトで使用したいと考えています。

ユーザーがli classのメニュー内の項目にマウスを合わせると、その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 コードで 2 つの方法を試しました。それらは以下のとおりです。

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

以下は、site.cssにある私の 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);}
  );

});

注意：デモのアンカー要素に対するデフォルトのアクションを防ぐために、クリックイベントハンドラーを追加しました

アニメーションをスムーズにするために、各イベントハンドラーのコマンドの前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アコーディオンも確認することをお勧めします。これは、基本的にここで行っていることを実行しますが、いくつかの追加オプションもあります。

編集：

両方の更新の後、私は問題が何であるかを知っています。使用しているスライドショープラグインは、MootoolsJavaScriptフレームワーク用です。ここで提供されるコードは、jQueryJavaScriptフレームワーク用です。同じページのサイトで両方のフレームワークを使用することは問題あり$ませんが、両方のフレームワークは選択に使用するオブジェクトを割り当て、それぞれの場合のオブジェクトには異なるメソッド、プロパティなどがあります。したがって、両方のフレームワークをで動作させるには同時に、この競合を回避する必要があります。幸い、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>

    ....

リンクしたMootoolsと同様の効果を提供するjQuery用の優れたスライドショーおよびライトボックスプラグインがたくさんあります。

私は、特定の機能上の必要性のために絶対に必要でない限り、自分のサイトでJavaScriptフレームワークを1つだけ使用することに固執していると思います。これは競合を回避するだけでなく、通常、別のフレームワークが行うことを達成するためのフレームワークに組み込まれた方法があります。フレームワークがコアライブラリの一部としてその機能を備えていない場合でも、フレームワークは拡張可能であるように設計されているため、プラグインを開発し、ニーズに合わせて機能を拡張できるアーキテクチャを備えています。

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