When the image in the simple dropdown is clicked, it fails to activate the dropdown feature.
This issue was encountered while working on a Shopify project, making it challenging to troubleshoot. To demonstrate the problem, I have re-created the scenario in CodePen. As shown in the example, clicking the image does not trigger the dropdown functionality.
Check out the CodePen demo here
Here's a snippet of the HTML code:
<div class="dropdownprod">
<div onclick="dropDowntown()" class="dropbtn">
<span class="dropdowncheese">Styles</span>PRODUCT TITLE<img class="dropimg2" src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Small_rhombihexahedron.png" style="height:45px;"></div>
<div id="myDropdown" class="dropdown-content">
THE DROPDOWN CONTENT GOES HERE
</div>
</div>
And here's the Javascript snippet for handling the dropdown functionality:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function dropDowntown() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
However, upon further inspection, it was noticed that when clicking on the image, the code portion turns purple indicating an issue. Is there a specific reason behind this behavior?