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

您可以尝试使用 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 */
}

Answer 2

没有看到getMenu（）函数很难说。你在div和锚上都有onclick似乎很奇怪。如果从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/

希望这有帮助。

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

2 个答案: