CSS Question

onclick div with glyphicon does not work when clicking icon

I got a menu that shows when the user click a "button", so i got the code below. It works when the user click in the div, but not when clicking on the icon in the span, can anybody explain me why? I have tried several combinations but never seem to be able to get it to work properly.

<style>
.dropbtn {
z-index:4000;
background-color: #888677;
color: white;
padding: 10px 30px 10px 30px;
font-size: 22px;
color:#d6d1bd;
width:100px;
text-align:center;
display: table;
margin: 0 auto
}
</style>
<script>
function getMenu() {
document.getElementById("myDropdown").classList.toggle("show");
}
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');
}
}
}
}
</script>

<div id="myDropdown">
my menu
</div>

<div style="border:0px;z-index:1000;" class="dropbtn" onclick="getMenu()" >
<a onclick="getMenu()">
<span class="fa fa-bars">test</span>
</a>
</div>

Answer

Without seeing the getMenu() function its hard to say. It seems odd that you have the onclick on both the div and the anchor. If the onclick is triggered from the div, then you shouldn't need the anchor at all i would have thought

If I was doing this myself I might try something like this:

HTML:

<ul>
  <li>
    <span id="menu_button_1" class="menu_button">
       <i class="fa fa-bars" aria-hidden="true"></i> Menu
    </span>
    <ul class="sub_menu" id="sub_menu1">
      <li class="sub_menu_item">
        <i class="fa fa-square" aria-hidden="true"></i> Item
      </li>
    </ul>   
  </li>
</ul>

JS:

$(document).ready(function(){
  $('#menu_button_1').click(function(){
    $('#sub_menu1').toggle('fast');
  });
});

https://jsfiddle.net/trr0qnhp/1/

Hope this helps.