アイコンをクリックしたときにglyphiconでonclick divが機能しない

Question

ユーザーが「ボタン」をクリックしたときに表示されるメニューが表示されます。これは、ユーザーがdivでクリックしたときに機能しますが、スパンのアイコンをクリックしても機能しません。私はいくつかの組み合わせを試してきましたが、それを正しく動作させることができないようです。あなたが試すことができますどのような

<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

getMenuを（）見ずに言うのはそのハード機能します。 divとアンカーの両方にonclickがあることは奇妙に思えます。

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> 

onclickのはDIVからトリガされた場合は、私は私がこのような何かを試してみてください自分でこれをやっていた場合、私は

を考えているだろう、すべてのアンカーを必要はありません

JS：

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

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

Hこれは役に立ちます。

Answer 2

は、あなたがsetであなたのアイコンを表しescape/variableを置くことが可能なCSS pseudo-elementsを使用してアンカーにフォント-恐ろしいグリフのアイコンを追加することですこれは、Font-Awesomeによって提供されています。あなたのケースでは

は、コードは次のsimmilar何かのようになります。

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 */ 
}