как я могу использовать менее динамически - PullRequest
Новая
       6

как я могу использовать менее динамически

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

У меня есть кнопка начальной загрузки на моей html-странице: 

<button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>

чуть ниже у меня есть это: 

<div class="navbar-collapse collapse">

при наведении курсора на кнопку цвет фона меняется на ожидаемое значение с помощью этого селектора: 

.navbar-header > .navbar-toggle:hover {
background-color: #9c83bb;
color: #fff;
}

Когда я нажимаю кнопку, целевой div изменяется на: 

<div class="navbar-collapse collapse on">

Таким образом, используя Less, я хочу иметь возможность сохранять цвет фона при наведении, пока «on» прикреплен к целевому элементу div.

1 Ответ

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

Меньше - это просто препроцессор, он не предоставит вам возможность вернуться к предыдущему элементу и изменить его классы или стили в зависимости от наличия класса на отдельном элементе ниже в DOM. Если вы хотите сделать это, вам понадобится JavaScript.

Другой способ сделать это состоит в том, чтобы изменить элементы, полностью независимые друг от друга, но при этом предоставить им обоим переключаемое состояние. Более конкретно: измените кнопку на флажок, скройте флажок и стилизуйте ярлык. Вы все еще можете иметь атрибуты данных data-toggle и data-target на вашем элементе, это будет просто элемент другого типа. 

input.navbar-toggle ~ label:hover {
  background-color: #9c83bb;
  color: #fff;
}

input.navbar-toggle {
  display: none;
}

input.navbar-toggle ~ label {
 border: 1px solid black;
 padding: 2px;
 border-radius: 3px;
}

input.navbar-toggle:checked ~ label {
  color: #fff;
  background-color: #9c83bb;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<input type='checkbox' id="navbar-toggle-input" class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' /><label for="navbar-toggle-input">Toggle</label>

<div class="navbar-collapse collapse">Navbar!<div>

Edit:

Если вы хотите сделать то же самое с JavaScript: 

document.getElementById('navbar-toggle-button').addEventListener('click', function() {
  var target = this.dataset.target.replace('.', '');
  var element = document.getElementsByClassName(target)[0] // This is lazy, don't do this. It's just for testing

  if (hasClass(element, 'show')) {
    this.style.color = 'white';
    this.style.backgroundColor = 'black';
  } else {
    this.style.color = '#fff';
    this.style.backgroundColor = '#9c83bb';
  }
});

function hasClass(target, className) {
  return new RegExp('(\\s|^)' + className + '(\\s|$)').test(target.className);
}
button.navbar-toggle:hover {
  background-color: #9c83bb;
  color: #fff;
}

button.navbar-toggle {
  background-color: black;
  color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type='button' id="navbar-toggle-button" class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>Toggle</button>

<div class="navbar-collapse collapse">Navbar!<div>
...