单击图标时，带有 glyphicon 的 onclick div 不起作用

Question

我有一个菜单，当用户点击 "button" 时会显示，所以我得到了下面的代码。它在用户单击 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

您可以尝试使用 CSS pseudo-elements in which You can place the escape / variable which represents Your icon in the set, which is being provided by Font-Awesome.

将 Font-Awesome 字形图标添加到锚点

在您的情况下，代码看起来类似于：

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

Answer 2

没有看到 getMenu() 函数很难说。您在 div 和锚点上都有 onclick 似乎很奇怪。如果 onclick 是从 div 触发的，那么你根本不需要我认为的锚点

如果我自己这样做，我可能会尝试这样的事情：

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/

希望这对您有所帮助。

单击图标时，带有 glyphicon 的 onclick div 不起作用

onclick div with glyphicon does not work when clicking icon

html

javascript

css

glyphicons