Check out my website: . There's a menu option called Services with a dropdown feature. Here is the code for it:
<li class="dropdown menu-services"><a class="dropdown-toggle" href="#" data-toggle="dropdown" data-target="#">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="menu-online"><a href="http://annapiotrowski.com/online-health-coaching/">Online</a></li>
<li class="dropdown menu-in-person"><a href="#">In Person</a>
<ul class="dropdown-menu">
<li class="menu-classes"><a href="http://annapiotrowski.com/classes/">Classes</a></li>
<li class="menu-corporate-wellness"><a href="http://annapiotrowski.com/corporate-wellness/">Corporate Wellness</a></li>
</ul>
</li>
</ul>
</li>
If you're on mobile, clicking on Services should expand the menu to display the items in the dropdown. I'm using this jQuery script to toggle it:
<script>
(function($) {
$(document).ready(function(){
var newWindowWidth = $(window).width();
if (newWindowWidth < 768) {
$(".dropdown").on("click", function() {
$(".dropdown").toggleClass("open");
});
}
});
})( jQuery );
</script>
When the page is at the top, I can click on the Services menu item and see the dropdown items.
But when I scroll down and try to do the same mid-page, it doesn't work at all :( Clicking on Services does nothing. What could be the issue?
I've attempted this fix:
(function($) {
$(document).ready(function(){
var newWindowWidth = $(window).width();
if (newWindowWidth < 768) {
$(".dropdown").on("click", function() {
$(".dropdown").toggleClass("open");
});
$(".dropdown").off("click").on("click", function() { $(".dropdown").toggleClass("open"); });
}
});
})( jQuery );
Still no luck.