Within my navbar, there is a .dropbtn div that I want to trigger a dropdown function when clicked. However, only the text "TOTAL" seems to activate this function onclick.
The <span> and <i> elements inside the .dropbtn do not respond to clicks, and I require all three elements to be clickable in order to display the dropdown menu. I am utilizing jQuery without Bootstrap. Thank you in advance! (EDITED)
jQuery('body').on('click', '.dropbtn', function() {
jQuery("#myDropdown").toggleClass("show");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="reservas_right">
<div class="dropdown_reservas nav-item_reservas" id="inner_reservas_right">
<div class="dropbtn">
TOTAL
<br /><span id="totalprice">0,00€</span>
<i class="material-icons">arrow_drop_down</i>
</div>
<div class="dropdown-content_reservas" id="myDropdown">
<ul id="dropul" class="dropul">
<li id="drop1"></li>
<li id="drop2"></li>
<li id="drop3"></li>
<li id="drop4"></li>
<li id="drop5"></li>
<li id="drop6"></li>
</ul>
</div>
</div>
</div>CSS:
.show{
list-style-type:none;
}