Question

After 4 months of working without a problem, a jQuery vertical drop down menu has suddenly disappeared. I assume it has something to do with updates to the jQuery version I am linking to which is neccessary for other functions on the page http://code.jquery.com/jquery-latest.min.js.
The page can be viewed here.

This is an example of the HTML

<li><a href="#">Morocco</a>
<ul>
  <li><a href="?panel=0#morocco1">10 day Trek &amp; Camels </a></li>
  <li><a href="?panel=1#morocco2"> 14 day Trek &amp; Camels </a></li>
  <li><a href="?panel=2#morocco3">14 day Trek &amp; Service</a></li>
</ul>

This is the jQuery/Javascript

<script type="text/javascript">
$(function () {
    $('#nav > li > ul')
        .hide()
        .click(function (e) {
        e.stopPropagation();
    });

    $('#nav > li').toggle(function () {
        $(this)
            .removeClass('waiting')
            .find('ul').slideDown();
    }, function () {
        $(this)
            .removeClass('waiting')
            .find('ul').slideUp();
    });

    $('#nav > li').hover(function () {
        $(this).addClass('waiting');
        setTimeout(function () {
            $('#nav .waiting')
                .click()
                .removeClass('waiting');
        }, 800);
    }, function () {
        $('#nav .waiting').removeClass('waiting');
    });
});
</script>

<script type="text/javascript">
$(document).ready(function () {
    $('#nav > li > a').eq(1).next().show();
});
</script>

This is the CSS:

}
#usexpeditionleftmenu {
width: 165px;
float: left;
background-color: #FFF;
margin-top: 15px;
padding-left: 12px;

    }
#nav {
float: left;
width: 155px;
border-top: 1px solid #999;
border-right: 1px solid #999;
border-left: 1px solid #999;

}
#nav li a {
display: block;
background: #d7d7d7;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #afafaf;
text-decoration: none;
color: #EB5B00;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;
}
ul#nav li ul li a {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
color: #EB5B00;
}
#nav li a:hover, #nav li a.active {
color: #fff;
background-color: #8F8F8F;  
}
#nav li ul {
display: none; // used to hide sub-menus
}
#nav li ul li a {
background: #c1c1c1;
border-bottom: 1px dotted #ccc;
padding-top: 1px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 5px;

}

#nav, #nav ul, #nav li {list-style:none;}

If anyone can provide any pointers at all as to where the problem might be and how to resolve it I’d really appreciate it. Been tearing my hair out! Thank you.

Answer 1

Your fancybox plugin utilizes the deprecated $.browser which has been removed from the latest jQuery release (1.9), meaning now you get an error in that script that breaks its functionality.

There are 2 solutions:

• Downgrade back to jQuery 1.8.3, CDNs available at (use either of these):

  http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js
  http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js
  http://code.jquery.com/jquery-1.8.3.js
  

• Use the jQuery Migrate plugin to restore old deprecated behavior. See info here – there’s a development version that outputs console warnings when deprecated features are utilized and another minified version that is more suitable for production.

---

On a side-note, you should not use the http://code.jquery.com/jquery-latest.min.js on a production environment as you can’t foresee what may change in the future. Always keep your site with a stable jQuery version that you’ve throughout tested.