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

【问题标题】：onclick div with glyphicon does not work when clicking icon单击图标时，带有 glyphicon 的 onclick div 不起作用
【发布时间】：2016-11-23 17:37:03
【问题描述】：

我有一个显示用户单击“按钮”时的菜单，所以我得到了下面的代码。它在用户单击 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>

【问题讨论】：

能否请您提供 getMenu() 函数的代码？而且你真的不应该使用 onclick-events...
如果你可以创建一个 jsfiddle，那就太好了。图标在哪里？
为什么会有两次onclick？
我试图创建一个 jsfiddle，但我无法让它工作。我使用了来自w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown 的菜单示例

标签： javascript html css glyphicons

【解决方案1】：

没有看到 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/

希望这会有所帮助。

【讨论】：

谢谢，是的，当我添加你的 javascript 时效果很好。稍微改了一下，就又关了。 jsfiddle.net/g86zy99y

【解决方案2】：

您可以尝试使用 CSS pseudo-elements 将 Font-Awesome 字形图标添加到您的锚点，您可以在其中放置 escape / variable 代表 set 中的您的图标，由 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 */
}

【讨论】：