Шрифт Awesome Icon Dropdown не работает на мобильном - PullRequest
Новая
       7

Шрифт Awesome Icon Dropdown не работает на мобильном

0 голосов
/ 11 октября 2018

Мой раскрывающийся список работал отлично, пока я не добавил значки Font-Awesome на панель навигации.После того, как я добавил значки гамбургера и времени для представления своего меню, оно перестало работать как для мобильных устройств, так и для настольных компьютеров.

После этой первой проблемы я попытался изменить свой JS и элемент, который вызывает мою функцию JS;Мне удалось заставить это работать для настольного компьютера, но мобильный все еще сломан.

Проблема:
Для мобильных устройств, когда я нажимаю на значок бургера, ничего не происходит.
Для рабочего стола, когда я нажимаю на значок гамбургера / креста, он работает нормально

Я попытался воссоздать проблему во фрагменте ниже.
К сожалению, мне не удалось воссоздать проблему, поэтому я просто добавил ссылку на свой тестовый сайт.

Мой вопрос: Как использовать значки Font-Awesome в качестве кнопок для мобильных устройств?

Главная страница - единственная с добавленными значками, используйте ее для отображения проблемы.

Ссылка на тестовый сайт: 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>

1 Ответ

0 голосов
/ 11 октября 2018

Я надеюсь, что это может быть полезно для вас, я использовал значки FA в качестве кнопок, представляя их внутри другого элемента, такого как div или ссылка, а затем с помощью JavaScript заставляю его работать как кнопка.Пример: 

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

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

Вы также можете использовать атрибут onClick внутри div: 

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

Надеюсь, это поможет вам, у меня никогда не было ошибок или я не работал ни на мобильном, ни на настольном компьютере, используяИконки ФА такие.

...