In my project, I have a cart icon that when mouse clicks on the icon needs to unfold a dropdown list with two link options. When the mouse is clicking on somewhere else or in a blank space the dropdown list needs to dissapear.
Here is a snippet of my html template which shows upon clicking on the element with id shoppingCartIcon
the javascript function cartIconClicked()
is called.
<div class="container-fluid sticky-top" id="takeawayHeaderCartContainer">
<div class="row">
<div class="col-11" id="cartIconContent">
<i class="fa dropbtn" id="shoppingCartIcon" onclick="cartIconClicked()"></i> <!--this code codes for the shopping cart icon-->
<span class='badge badge-warning' id='lblCartCount'>
{% if sessionValidity %}
{{totalCartItems}}
{% else %}
0
{% endif %}
</span>
<div id="myDropdown" class="dropdown-content">
<a href="#">Option 1</a>
<a href="#">Option 2</a>
</div>
</div>
</div>
</div>
In my css file I have this snippet.
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
#takeawayHeaderCartContainer {
justify-content: flex-end;
}
#shoppingCartIcon {
font-size: 2rem;
float: right;
color: blue;
}
#lblCartCount {
font-size: 16px;
background: #ff0000;
color: #fff;
padding: 0 5px;
vertical-align: top;
float: right;
}
.badge {
padding-left: 9px;
padding-right: 9px;
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
}
.label-warning[href],
.badge-warning[href] {
background-color: #c67605;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
I am not sure if I fully graps the last line .show {display:block;}
in above css style because we do not have a show class in the html template to begin with. I therefore guess it is meant for the javascript – see below. I got this script from this tutorial. Can someone explain to me what this line in particular classList.toggle("show")
does? I guess it switches the class “show” on and off for the dropdown list? My biggest problem is though, this line if (!event.target.closest('.fa dropbtn'))
. This line gets fired every time both when I click on the cart icon and somewhere else, which is NOT the intension. It should get fired if the user clicks somewhere else than the cart icon, in which case a check will be performed to see if the drop down list has the “show” on and if so it should be removed, leading to drop down list dissapearing – see the link tutorial for full description.
function cartIconClicked() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
console.log(event.target);
if (!event.target.closest('.fa dropbtn'))
{
console.log("we are here");
}
}