아이콘을 클릭 할 때 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> 

온 클릭이 사업부에서 트리거되는 경우에, 당신은 내가 이런 식으로 뭔가를 시도 할 수 있습니다 자신이하고있는 경우 내가

을 생각하는 모든에 닻을 필요가 없습니다

JS :

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

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

H ope 도움이됩니다.

Answer 2

이 CSS pseudo-elements이있는 당신은 set에있는 당신의 아이콘을 나타내는 escape/variable을 배치 할 수 있습니다 사용하여 앵커 글꼴 - 굉장 그래프 아이콘을 추가하는 것입니다, 이는 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 */ 
}