JQuery переключения на зависания не работает? - PullRequest
Новая
       30

JQuery переключения на зависания не работает?

0 голосов
/ 06 января 2011

Черт возьми, я знаю, что это легко, я сделал это b4 ... вот и все. это выпадающее меню

SCRIPT 

$("#North").hover(function () {
   $("#nec").toggle();
});
$("#Mid").hover(function () {
   $("#mac").toggle();
});
$("#South").hover(function () {
   $("#sac").toggle();
});

HTML 

      <div id="ddRegions" class="ddStyle">
        <div class="links" id="North"><a href="">North East Coast</a></div>
        <div class="links" id="Mid"><a href="">Mid Atlantic Coast</a></div>
        <div class="links" id="South"><a href="">South Atlantic Coast</a></div>
  </div>
  <div id="nec" class="ddStyle" style="display:none">
        <div class="links"><a href="">Maine</a></div>
        <div class="links"><a href="">New Hampshire</a></div>
        <div class="links"><a href="">Massachusetts</a></div>
        <div class="links"><a href="">Rhode Island</a></div>
        <div class="links"><a href="">Connecticut</a></div>
        <div class="links"><a href="">New York</a></div>
        <div class="links"><a href="">New Jersey</a></div>
  </div>

ВСЕ HTML (имейте в виду, я использую php include, так что это просто заголовок меню) 

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Regions - Atlantic Fishing Report</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/layout.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/maxheight.js" type="text/javascript"></script>
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/cufon-replace.js" type="text/javascript"></script>

<script src="js/Myriad_Pro_400.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_600.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_700.font.js" type="text/javascript"></script>
<script src="js/Myriad_Pro_italic_600.font.js" type="text/javascript"></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

 <SCRIPT LANGUAGE="JavaScript">

current_overID = "";
last_overID = "";

function item (img_name,width,height)
{
        img_prefix = img_name;
        this.slide_img = new Image (width,height);
        this.slide_img.src = "img/map_" + img_prefix + ".gif";
}

function new_item (img_name,width,height) 
{
        item [img_name] = new item (img_name,width,height);
}

function mouseover (itemID)
{
        current_overID = itemID;
        if (current_overID != last_overID) {
                          document.jrcmap.src = item [current_overID].slide_img.src;
        }
}

new_item ("idle",316,545);
new_item ("northeast",316,545);
new_item ("midatlantic",316,545);
new_item ("southatlantic",316,545);


</SCRIPT>

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/js/pngfix.js"></script>
<![endif]-->


<script type="text/javascript">
    $(document).ready(function(){
        $("td #ddFish").hover(function () {
            $("div #ddRegions").toggle();
        });
        $("div#North").hover(function () {
            $("div#nec").toggle();
        });
        $("#Mid").hover(function () {
            $("#mac").toggle();
        });
        $("#South").hover(function () {
            $("#sac").toggle();
        });  
    });
</script>

</head>
<body id="page1" onload="new ElementMaxHeight()">
  <div id="ddRegions" class="ddStyle" style="display:none">
            <div class="links" id="North"><a href="">North East Coast</a></div>

            <div class="links" id="Mid"><a href="">Mid Atlantic Coast</a></div>
            <div class="links" id="South"><a href="">South Atlantic Coast</a></div>
      </div>
      <div id="nec" class="ddStyle" style="display:none">
            <div class="links"><a href="">Maine</a></div>
            <div class="links"><a href="">New Hampshire</a></div>
            <div class="links"><a href="">Massachusetts</a></div>

            <div class="links"><a href="">Rhode Island</a></div>
            <div class="links"><a href="">Connecticut</a></div>
            <div class="links"><a href="">New York</a></div>
            <div class="links"><a href="">New Jersey</a></div>
      </div>
      <div id="mac" class="ddStyle" style="display:none">
            <div class="links"><a href="">Delaware</a></div>

            <div class="links"><a href="">Maryland</a></div>
            <div class="links"><a href="">Virginia</a></div>
            <div class="links"><a href="">North Carolina</a></div>
      </div>
      <div id="sac" class="ddStyle" style="display:none">
            <div class="links"><a href="">South Carolina</a></div>
            <div class="links"><a href="">Georgia</a></div>

            <div class="links"><a href="">Florida</a></div>
      </div>
<div class="body-bg">
  <div id="main">
    <!-- header -->
    <div id="header">
      <div class="logo" style="width:100%"><a href="/default.php"><img src="/img/header-logo.png" border="0" width="900px" height="100px" alt="Atlantic Fishing Report" /></a>&nbsp;&nbsp;<!--<img src="/img/ad/430x70_ad1.jpg" align="bottom" class="advert"  />--></div>
      <div class="new-nav-box">
                    <table cellpadding="0" cellspacing="0" border="0" id="tablenew-nav" align="center">

                    <tr><td width="62px">&nbsp;</td>
                        <td><a href="default.php" id="newhome" ><span></span></a></td>
                        <td id="ddFish"><a href="/fishreport.php" id="newfishingreports"><span></span></a></td>
                        <td><a href="/landings.php" id="newlandings"><span></span></a></td>
                        <td><a href="/boats.php" id="newboats"><span></span></a></td>
                        <td><a href="/searchGallery.php" id="newsearch"><span></span></a></td>
                        <td><a href="regions.php" id="ACTregions"><span></span></a></td>
                        <td><a href="/contact-us.php" id="newcontact"><span></span></a></td>
                        <td width="68px">&nbsp;</td>

                    </tr>
                    </table>
        </div>
      </div>

               <div id="content">
      <div class="cont-box">
        <div class="right-bot-corner">
          <div class="wrapper">

            <div class="col-1 maxheight">
              <div class="box maxheight">
                <div class="inner">
                  <div class="indent1">
                    <h4><b>Sponsors</b></h4>
                                        <ul class="list">
                        <li><span class="advert"><a href="http://www.atlanticfishingreport.com"><img src="/img/ad/ad1.jpg" alt="Atlantic Fishing Report" title="Atlantic Fishing Report" width="160" height="100" /></a></span></li>
                    </ul>

                    <div style="color:#FFF"><a href="advertise-with-us.php">Interested in Advertising here? Learn more</a></div>
                                      </div>
                </div>
              </div>
            </div>            

                <div class="col-2">
              <div class="indent2">
                <div class="wrapper">
                  <h3 style="font-size:42px"> Region</h3>

                  <hr />
                  <br />
                    <table width="100%" align="left" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top"><table cellpadding="0" cellspacing="0" border="0"><tr>
                              <td valign="top">

                              <img src="/img/map_idle.gif" border="0" name="jrcmap" usemap="#jrc" />
                              </td></tr></table></td>
                            <td width="300px" valign="top" align="right">                         
                                                                <table cellpadding="0" cellspacing="0" width="100%" id="reports">


                                <tr>
                            <th colspan="3">
                                <div style="padding:0 10px 0 0"><img src="img/sponsors.png" width="36" height="20" alt="Sponsored Listing" /> icon denotes sponsors</div>
                            </th>
                        </tr>
                                </tr>
                                                                </table>
                            </td>

                        </tr>
                    </table>
                </div>
              </div>
         </div>
       </div>
     </div>
   </div>

<map name="jrc">
  <area shape="poly"  coords="119,50,163,212,188,236,293,124,310,51,291,5" href="/regions.php?id=1" alt="" OnMouseOver="mouseover('northeast');window.defaultStatus=''; window.status='\''; return true"..."
OnMouseOut="mouseover('idle')">
  <area shape="poly"  coords="147,203,207,258,152,357,109,325,6,323,60,248" href="/regions.php?id=2" alt="" OnMouseOver="mouseover('midatlantic');window.defaultStatus=''; window.status='\''; return true"..."
OnMouseOut="mouseover('idle')">
/>
  <area shape="poly"  coords="10,537,137,533,145,361,106,329,8,327" href="/regions.php?id=3" alt="" OnMouseOver="mouseover('southatlantic');window.defaultStatus=''; window.status='\''; return true"..."
OnMouseOut="mouseover('idle')">
/>
</map>
            <br />
            <div class="banner-box">
                <div class="left">
                    <div class="inner">

                        <h4 style="font-size:20px">Advertise <b>NOW!</b></h4>
                        <p style="font-size:12px">Click the arrow for advertisement and sponsorship opportunities.</p>
                    </div>
                </div>
                    <a href="/advertise-with-us.php"><img src="/img/button2.gif" alt="" /></a>
            </div>
            <div class="form-box">

                <div class="right">
                    <div class="inner">
                        <h4 style="font-size:20px">Newsletter <b>Signup!</b></h4>
                        <p style="font-size:12px">Sign up to recieve our monthly newsletter</p>
                    </div>
                </div>

                    <form method="post" id="form">

                    <input type="hidden" name="emailsignup" value="1" />
                        <div class="form">                            <input type="text" id="text" value="Enter your e-mail please" onfocus="if(this.value=='Enter your e-mail please'){this.value=''}" onblur="if(this.value==''){this.value='Enter your e-mail please'}" name="email" />
                            <input name="submit" id="newsletter" type="submit" value="Sign Up!" />
                        </div>
                    </form>
                    <br />

            </div>

            </div> <br />

</div>
<div align="center" style="padding-top:10px">
<div style="color:#FFF; width:960px; font-size:10px; padding-top:10px"><!--<a style="color:#FFF" href="#">Newsletter Signup</a> &nbsp;|&nbsp;&nbsp;<a style="color:#FFF" href="#">About Us</a> &nbsp;|&nbsp;&nbsp;<a style="color:#FFF" href="#">Privacy Policy</a> &nbsp;|&nbsp;&nbsp;<a style="color:#FFF" href="#">Affiliates</a><span style="padding-left: 380px">-->Copyright &copy 2010 <a style="color:#FFF" href="#">atlanticfishingreport.com</a> &nbsp;&nbsp;All rights reserved.</span>
</div>
</div>
<script type="text/javascript"> Cufon.now(); </script>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15581469-1");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>

1 Ответ

0 голосов
/ 06 января 2011

Попробуйте использовать jQuery вместо $

Одна из других библиотек javascript может перезаписать ее и использовать ее для себя (я считаю, что виновен prototype.js) 

jQuery("#North").hover(function () {
   jQuery("#nec").toggle();
});
jQuery("#Mid").hover(function () {
   jQuery("#mac").toggle();
});
jQuery("#South").hover(function () {
   jQuery("#sac").toggle();
});

Если этоВ этом случае посмотрите на функцию noconflic в jquery для помощи в использовании наряду с другими библиотеками

http://api.jquery.com/jQuery.noConflict/

...