Question

在下拉菜单中，我添加了Font-Awesome图标，直到我的下拉列表运行良好。添加汉堡和时间图标以表示菜单后，它在移动设备和台式机上均无法正常工作。

在第一个问题之后，我尝试更改JS和调用JS函数的元素；我设法使它在台式机上运行，但手机仍然坏了。

问题：
对于移动设备，当我单击汉堡图标时，没有任何反应。
对于台式机，当我单击“汉堡/十字”图标时，它可以正常工作

我尝试在下面的代码段中重新创建该问题。
不幸的是，我无法重新创建问题，因此我仅添加了指向测试站点的链接。

我的问题：我如何使用“超赞字体”图标作为移动按钮？

主页是唯一添加了图标的页面，可用于显示问题。

链接到测试站点：https://www.azsmtest.com

function dropdown() {
  "use strict";
  var getBurg = document.getElementById('burg');
  var getCross = document.getElementById('cross');
  var nav_items = document.getElementsByClassName('nav-item');
  var nav_list = document.getElementById('navList');


  if (getBurg.style.display === 'none') {
    getBurg.style.display = 'block';
    getCross.style.display = 'none';
    nav_list.style.display = 'none';


    for (var i = 0; i < nav_items.length; i++) {
      nav_items[i].style.display = 'none';
    }

  } else {
    getBurg.style.display = 'none';
    getCross.style.display = 'block';
    nav_list.style.display = 'block';


    for (var j = 0; j < nav_items.length; j++) {
      nav_items[j].style.display = 'block';
    }


  }
}

.fixed-nav {
  font-weight: bold;
  top: 0;
  left: 0;
  width: 100%;
  font-size: .8em;
  position: fixed;
  height: 50px;
  box-sizing: border-box;
  text-align: center;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
  z-index: 1;
}

.fixed-nav ul {
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  margin-top: -3px;
}

.fixed-nav li {
  box-sizing: border-box;
}

.fixed-nav li:hover {
  display: block;
}

.fixed-nav ul li a {
  text-decoration: none;
  margin: 0px;
}

.fixed-nav ul li a:hover {}

.fixed-nav a {
  text-decoration: none;
}

#burg {
  background: none;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 45px;
  padding: 2px 15px 0 15px;
  border: 0;
  vertical-align: middle;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}

#cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 8px 15px 0px 15px;
  font-size: 30px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  display: none;
}

.nav-item {
  position: relative;
  height: 70px;
  width: 100%;
  display: none;
  font-size: 20px;
  cursor: pointer;
}

.nav-item a {
  display: block;
  height: 100%;
}

.nav-item:hover {
  background-color: #DFDFDF;
}

.nav-item:hover a {
  text-decoration: none;
}

#navList {
  margin-top: 50px;
  height: 100vh;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>


  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/solid.css" integrity="sha384-VGP9aw4WtGH/uPAOseYxZ+Vz/vaTb1ehm1bwx92Fm8dTrE+3boLfF1SpAtB1z7HW" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/fontawesome.css" integrity="sha384-1rquJLNOM3ijoueaaeS5m+McXPJCGdr5HcA03/VHXxcp2kX2sUrQDmFc3jR5i/C7" crossorigin="anonymous">
</head>

<body>

  <nav class="fixed-nav">
    <div id="burg">
      <i id="burger_icon" class="fas fa-bars" onClick="dropdown()"></i>
    </div>
    <div id="cross">
      <i id="cross_icon" class="fas fa-times" onClick="dropdown()"></i>
    </div>
    <ul id="navList">
    <div class="nav-item">
      <a href="#"><li>Inventory</li></a>
    </div>
    <div class="nav-item">
      <a href="#"><li>Finance</li></a>
    </div>
    <div class="nav-item">
      <a href="#"><li>About Us</li> </a>
    </div>
    <div class="nav-item">
      <a href="#"><li>Contact Us</li></a>
    </div>
    </ul>

  </nav>


</body>

</html>

Answer 1

我希望这对您有用，我一直使用FA图标作为按钮，将它们引入到另一个元素（如div或链接）中，然后使用JavaScript将其用作按钮。示例：

<div id="button">
  <i class="fas fa-sort-down"></i>
</div>

<script>
 $(document).ready(() => {
   $('#button').click(//anything you want);
 });
</script>

您还可以在div中使用onClick属性：

<div id="button" onClick="">
  <i class="fas fa-sort-down"></i>
</div>

希望这可以为您提供帮助，我从来没有出错过，也不能使用这样的FA图标在移动设备或台式机上工作。

字体真棒图标下拉列表在移动设备上损坏

1 个答案: