classList.toggle Только частично работает - PullRequest
Новая
       9

classList.toggle Только частично работает

0 голосов
/ 08 июня 2018

У меня очень запутанная проблема с использованием значков classList.toggle и Font Awesome.Я хочу, чтобы мое меню гамбургера при щелчке изменилось на X, и я пытаюсь использовать функцию JavaScript для достижения этой цели.Я просто не могу заставить его работать правильно.Странно то, что, когда я устанавливаю X в качестве значка по умолчанию, а затем меняю класс значков на меню гамбургеров при нажатии, он отлично работает.Вот мой рабочий код, меняющий X на гамбургер: 

function myFunction(x) {
  x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <i onclick="myFunction(this)" class="fa fa-times"></i>
</div>

Прекрасно работает.Но когда я пытаюсь изменить порядок, меняя гамбургер на X, это не работает.Вот этот код: 

function myFunction(x) {
  x.classList.toggle("fa-times");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>

Я должен что-то упустить.Что это?!

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Вам нужно удалить два старых бара, вы можете переключить два класса, и это будет отлично работать в любом порядке 

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> 
<body>
<div class="test">
     <i onclick="myFunction(this)" class="fa fa-bars"></i>    
</div>

        <script>
        function myFunction(x) {
                x.classList.toggle("fa-times");
                x.classList.toggle("fa-bars");
                console.log(x.classList)
            }
        </script>
</body>
0 голосов
/ 08 июня 2018

Когда вы делаете toggle("fa-times"), он не удаляет класс fa-bars, он просто добавляет или удаляет класс fa-times.А когда иконка имеет class="fa fa-bars fa-times", класс fa-bars имеет приоритет, поэтому вы видите гамбургер.

Вам нужно надеть оба класса, чтобы он работал надежно.Это будет работать независимо от того, какой класс вы установили изначально. 

function myFunction(x) {
  x.classList.toggle("fa-times");
  x.classList.toggle("fa-bars");
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="test">
  <i onclick="myFunction(this)" class="fa fa-bars"></i>
</div>
...