As I work on developing a new website, I have encountered an issue with the content inside my dropdown button not being engaging enough. Specifically, I have a link within a dropdown button located in the footer (visible on mobile), but this link does not redirect to another page.
Below is the code that I am currently using:
<div class="dropdown left-float">
<a class="drop" href="javascript:void(0);" style="display:block; border-radius:0px !important;">
Sitemap
<span class="pijl-rechts" style="float:right;">
<img src="img/caret-right.png" />
</span>
</a>
<ul class="dropdown-menu" style="position:relative; display:block; width:100%; margin-top:0px;">
<li><a href="waarom-kraamzorg-mama">Kraamzorg Mama</a></li>
<li><a href="contact">Contact</a></li>
<li><a href="mamapas">Mamapas</a></li>
<li><a href="vacatures">Openstaande vacatures</a></li>
<li><a href="algemene-voorwaardes"> Algemene voorwaardes (icoon slot) </a></li>
<li><a href="disclamer">Disclaimer</a></li>
</ul>
</div>
<script>
/*Downloaded from https://www.codeseek.co/danmalarkey/dropdown-with-rotating-caret-DBrxG */
$(document).ready(function() {
$('.dropdown').click(function(e) {
$(this).find('.dropdown-menu').toggleClass('open');
$($(e.target).find('.pijl-rechts').toggleClass('open-caret'));
e.preventDefault();
e.stopPropagation();
$(document).click(function() {
$('.dropdown-menu').removeClass('open');
$('.pijl-rechts').removeClass('open-caret');
});
});
$('.pijl-rechts').click(function(e) {
$(this).find('.dropdown-menu').toggleClass('open');
$($(e.target).find('.pijl-rechts').toggleClass('open-caret'));
e.preventDefault();
e.stopPropagation();
$(document).click(function() {
$('.dropdown-menu').removeClass('open');
$('.pijl-rechts').removeClass('open-caret');
});
});
});
</script>