I am facing an issue with a dropdown menu that works perfectly in jsFiddle during testing, but does not function as expected when I run it on my testing server.
jsFiddle: http://jsfiddle.net/cyberjo50/39bu8/2/
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="toggle.js"></script>
</head>
<body>
<button>Select Destinations<img src="images/down-arrow.png" width="20" height="20" alt="" style="vertical-align:middle; padding-top: 0px;"/></button>
<nav id="menu">
<a href="#">Philadelphia</a>
<a href="#">United States of America</a>
<a href="#">Philippines</a>
<a href="#">Long Destinations Names</a>
<a href="#">Some Destination</a>
<a href="#">Australia</a>
</nav>
</body>
</html>
Javascript
img_arrow = '<img src="images/down-arrow.png" width="20" height="20"/>';
$(function ()
{
var $window = $(window),
$nav = $('nav'),
$button = $('button');
$button.on('click', function ()
{
$nav.slideToggle();
});
$window.on('resize', function ()
{
if ($window.width() > 320)
{
$nav.show();
}
});
});
$('#menu a').click(function(e){
$('button').html($(this).html() + img_arrow);
e.preventDefault();
});
Here is my test page:
I cannot figure out why the dropdown menu is not functioning correctly on my test page. It should work similar to the one in Jsfiddle. The code used in the fiddle is exactly the same as what is implemented in my testing link.