Currently, the mobile menu on my test site (800px wide or less) does not have drop-down folder functionality. I am looking to make the mobile navigation menu function in the same way as it does on desktop.
Check out my website here
By default, when clicking on a title folder, the first link within that folder would open. To prevent this behavior, I used the following script:
<script>
$(document).ready(function() {
$('#mobileNav .mobile-folder>a').click(function(e) {
e.preventDefault();
});
});
</script>
Instead of opening the first link in the "folder titles," I want the hidden page links inside those folders to be displayed upon click.
However, my current code is not achieving the desired effect:
<script>
$(document).ready(function(){
$("#mobileNav .mobile-folder>a").click(function(){
$(this).find('.folder.external-link ul ').toggleClass("expand");
});
});
</script>
Here is the CSS I am using to hide and later display the page links:
.folder.external-link {display:none!important;}
.folder.external-link.expand {display:block!important;}
Any assistance on this matter would be greatly appreciated.