Jquery: Beim Hover auf dem Menüpunkt Display Text

Ich bin neu in JQuery, aber möchte es in eine Website, die ich Baue.

Wenn der Benutzer die Maus über ein Element im Menü mit li Klasse hovertriggerssubhead möchte ich einige anzeigen text darunter, befindet sich in der div (verschachtelte innerhalb der li) mit id NavSubhead. Ich habe mir mehrere Beispiele, nämlich im Kochbuch in der FAQ von der JQuery-Dokumentation und den code der JQuery-Website selbst.

Dies ist mein 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>

Ich habe zwei Methoden, dies zu erreichen in meinen JQuery code; Sie sind unten:

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

Jede Hilfe würde geschätzt werden. Danke!

UPDATE: ich habe versucht die zahlreichen Antworten, sogar mit einer funktionierenden demo, aber es funktioniert immer noch nicht, das ist sehr seltsam. Könnte es sein, verwandt sind, indem Sie jede chance, um Einschränkungen der navigation html, da von einer umfassenden Tabelle? Die Tabelle hat eine Feste Breite. Andere als die, ich weiß nicht, was ist das problem und JQuery verwiesen wird, richtig. Vielen Dank im Voraus!

UPDATE #2: Wie ist es möglich, dass dies nicht funktioniert, weil der einige seltsame Einschränkungen in Bezug auf meine HTML -, werde ich es hier posten. Wie Sie unten sehen können, ich bin mit diese Diashow framework zu.

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

Das unten ist mein css, in Website.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;
}

Vielen Dank im Voraus für Ihre Hilfe!

oopsey, gerade entdeckt einen Tippfehler in meinem code... Bearbeitung von post zu beheben, sehr leichte Tippfehler, aber das ist nicht die Lösung, nur noch.

InformationsquelleAutor Maxim Zaslavsky | 2009-08-14

3

Arbeiten Demo

jQuery-code
```
$(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. ich habe eine click-Ereignis-handler, um zu verhindern, dass die Standard-Aktion auf Anker-Elemente in die demo zu

Können Sie auch wollen, um die Kette in einem slideDown() und slideUp() vor der fade Befehl in jeder event-handler, die jeweils um die animation glatter
```
  $('#Navigation li a').hover(
    function(){$(this).next().stop(false, true).slideDown().fadeIn(500);},
    function(){$(this).next().stop(false, true).slideUp().fadeOut(500);}
  );
```
Können Sie auch wollen, um einen Blick auf die jQuery Akkordeon, die im wesentlichen das tut, was Sie hier tun, hat aber einige zusätzliche Optionen zu.

EDIT:

Nachdem beide Ihre updates, ich weiß, was das problem ist. Die Diashow-plugin, das Sie verwenden, ist für die Mootools-JavaScript-framework. Der code, den Sie zusammen hier ist für das JavaScript framework jQuery. Während es schön ist, dass beide frameworks auf Ihre Website auf der gleichen Seite, beide Rahmen weisen Sie ein Objekt an $ zur Auswahl, und das Objekt in jedem Fall hat unterschiedliche Methoden, Eigenschaften, etc. So, um Rahmenbedingungen zu schaffen, zur gleichen Zeit, die wir brauchen, um diesen Konflikt zu vermeiden. Zum Glück jQuery hat einen Befehl, um leicht zu bekommen, um dieses, noConflict(), die Freigabe der $ Kurzschrift, so dass andere frameworks verwenden können. Beachten Sie insbesondere die Reihenfolge, in der es enthalten sein muss, in einer Seite.

Also um den code zu erhalten arbeiten, die Struktur des Skripts werden müssen, werden wie folgt
```
<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>

    ....
```
Gibt es viele große slideshow und lightbox-plugins für jQuery bieten, dass ähnliche Effekte auf die Mootools ein, die Sie verlinkt haben.

Ich bin der Meinung, dass, wenn absolut notwendig für einige spezifische funktionelle müssen, halte ich mich an mit nur einem JavaScript-framework, das in meine Website. Nicht nur, dass diese Konflikte zu vermeiden, aber es gibt in der Regel Möglichkeiten, eingebaut in einen Rahmen zu erreichen, was anderen Rahmen hat. Selbst wenn ein Rahmen nicht haben, die Funktionalität als Teil der core-Bibliothek, die frameworks sind so konzipiert, dass erweiterbar und als solche, haben eine Architektur, die es einem ermöglicht, plugins zu entwickeln und erweitern die Funktionalität um die eigenen Bedürfnisse passen.
- Ich klebte Sie diesen code in, als auch versuchen, die demo-code, aber es funktioniert immer noch nicht, das ist sehr seltsam. Könnte es sein, verwandt sind, indem Sie jede chance, um Einschränkungen der navigation html, da von einer umfassenden Tabelle? Die Tabelle hat eine Feste Breite. Andere als die, ich weiß nicht, was ist das problem und JQuery verwiesen wird, richtig.
- hab die demo für Sie arbeiten? Ist jQuery verwiesen wird, korrekt in die eigene Seite - Sie können dies testen, mit einem einfachen $(function() { alert("Hallo"); }); das sollte dann eine Warnmeldung, wenn das DOM fertig geladen ist.
- Ich dachte das auch, aber es getestet mit einer Warnung nicht, eingewickelt in eine Funktion, so dass ich denke, es trifft es nicht überprüfen - ich werde versuchen, dass jetzt...
- Ja, JQuery funktioniert, aber nur, wenn Sie nicht in das Dokument.ready - - Funktion-ist das richtig? Oh, und ich habe Sie den code, den Sie geschrieben als Antwort in das Dokument ein.ready Funktion, aber es funktioniert nicht auch wenn Sie es außerhalb des Dokuments.bereit. Was gibt?
- Sorry, ich meine, dass die Hallo-alert funktioniert, aber nur, wenn Sie nicht im Dokument.ready - jquery arbeitet.
- Wenn die hello alert gearbeitet, aber nicht eingewickelt in Dokument fertig, dann das klingt wie jQuery wird nicht verwiesen wird, richtig, als ob es war, der Alarm funktionieren würde, eingewickelt in die document-ready-Funktion. Sind Sie mit anderen JavaScript-frameworks? Können Sie alle Ihre code Seite (wenn nicht zu groß)?
- Sicher!!! Jedoch, es hat einige andere javascript-code für eine slideshow mit einem Rahmen. Ich werde zu aktualisieren, die Frage mit dem code.
- Vielen Dank für diese prompte und einfache Lösung - ich werde in mit einem JQuery slideshow plugin statt in die Zukunft. Die noConflict () - code, den Sie geschrieben wirkt Wunder. Haben Sie einen großen Tag!
InformationsquelleAutor Russ Cam
1

Dieser arbeitete für mich. Sie sollten wahrscheinlich seien Sie konsequent in Ihren markup-obwohl und den ausgeblendeten text angezeigt wird, nachdem seine zugehörigen link in beiden Fällen.
```
$(document).ready(function()
{
    $('.NavSubhead').hide();

    $('li.hovertriggerssubhead').hover(
        function()
        {
            $('.NavSubhead', $(this)).show();
        },
        function()
        {
            $('.NavSubhead', $(this)).hide();
        }
    );
});
```
- Danke, aber ich habe Schwierigkeiten auch mit den arbeiten demo unten, so dass, sobald ich herausfinden, was Los ist werde ich versuchen Sie Ihren Weg. Nochmals vielen Dank!
InformationsquelleAutor Stephen Curran
0

Habe ich noch nicht getestet, aber ich denke, es sollte funktionieren:
```
$(document).ready(function() {

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

  $('#Navigation li').hover(
    function(){$('div.NavSubhead', this).fadeIn(500);},
    function(){$('div.NavSubhead', this).fadeOut(500);}
  );
}
```
- Testen... vielen Dank im Voraus! geht zurück zu melden mit den Ergebnissen.
- NÖ, nicht arbeitet, sondern, dass Sie für die Hilfe trotzdem! Aber der code sieht Recht für meine ungeübten Augen... kann jemand mich aufklären, warum dies nicht funktioniert entweder? Danke!
- Sorry, ich meinte "aber danke für die Hilfe trotzdem", falsch geschriebenes "danke".
- Ich behob ein paar Fehler in meinem code immer noch nicht funktioniert...
InformationsquelleAutor Marius

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.