Question

我的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">

因此，使用“较少”，我希望能够在“ on”附加到目标div时保持悬停背景的颜色。

Answer 1

Less只是一个预处理器，它不会为您提供返回到上一个元素并更改其类或样式的能力，这取决于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>

编辑：

如果您想对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>

如何减少动态使用

1 个答案:

编辑：