onclick Div ​​mit Glyphicon funktioniert nicht, wenn Sie auf das Symbol klicken

Question

Ich habe ein Menü, das zeigt, wenn der Benutzer einen "Button" klicken, so habe ich den Code unten. Es funktioniert, wenn der Benutzer in die div klicken, aber nicht, wenn Sie auf das Symbol in der Spannweite klicken, kann mir jemand erklären, warum? Ich habe mehrere Kombinationen ausprobiert, aber scheint nie in der Lage zu sein, es richtig funktionieren zu lassen.

<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 1

Ohne die getMenu zu sehen() -Funktion ist es schwer zu sagen. Es ist merkwürdig, dass Sie sowohl auf das Div als auch auf den Anker klicken. Wenn die Onclick aus dem div ausgelöst wird, dann sollten Sie nicht den Anker brauchen überhaupt dachte ich hätte

Wenn ich dies selbst zu tun war, ich könnte so etwas wie dies versuchen:

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/

H Das hilft.

Answer 2

Was Sie versuchen können, ist die Font-Ehrfürchtig Glyphe Symbol auf Ihren Anker mit CSS pseudo-elements, in dem Sie die/variableescape platzieren können hinzufügen, die Ihr Symbol in der set darstellt, was von Font-Awesome zur Verfügung gestellt wird.

In Ihrem Fall würde der Code wie etwas aussehen simmilar dazu:

a { 
    position: relative; /* Keeping the glyph-icon within the anchor */ 
}  

/* Pseudo element usage can be annotated with both : or :: (css2/css3 syntax) */ 
a::after { 
    /* We need to add the font itself so our CSS can know where the icons are */ 
    font-family: ' Font Awesome font '; 

    /* in this case, the content property is the actual icon we want to use */ 
    content: ' your escape/variable '; 

    /* We get our icon out of the document flow, e.g. its positioning inside the anchor */ 
    position: absolute; 

    /* additional styles for icon positioning */ 
}