在CSS

Question

我不知道标题是否会造成混淆，但是此代码片段会更好地解释它。

function select(event) {
	$('li').removeClass('is-active');
  $(event.target).parent().addClass('is-active');
}

.item {
  background-color: #c3c3c3;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
}

.item.is-active .itemName {
  background-color: red;
}

.item:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
  </li>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
    <ol>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
    </ol>
  </li>
</ul>

单击第一个父级，父级将具有红色背景。 现在单击第二个父级，父级和子级现在将具有红色背景。

我想防止这种情况。如果我单击“父级”，则父级应只涂成红色，与它有多少个孩子无关。

那么这将是什么CSS？不必添加太多额外的类？就我而言，父项和子项都是具有相同样式的列表项。

我在考虑使用：not（）吗？但这将需要在每个孩子上增加另一个额外的类。还有其他解决方法吗？

谢谢。

Answer 1

删除每个元素上的全局事件属性。将CSS调整为

.is-active {
  background-color: red;
}

并将click事件附加到.item .itemName或仅附加.itemName

function select(event) {
  $('*').removeClass('is-active');
  $(this).addClass('is-active');
}

$('.item .itemName').on('click', select);

.item {
  background-color: #c3c3c3;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
}

.is-active {
  background-color: red;
}

.item:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item">
    <span class="itemName">Parent</span>
  </li>
  <li class="item">
    <span class="itemName">Parent</span>
    <ol>
      <li class="item">
        <span class="itemName">Children</span>
      </li>
      <li class="item">
        <span class="itemName">Children</span>
      </li>
    </ol>
  </li>
</ul>

Answer 2

使用.item.is-active>.itemName代替.item.is-active .itemName。

请参见下面的代码段

function select(event) {
	$('li').removeClass('is-active');
  $(event.target).parent().addClass('is-active');
}

.item {
  background-color: #c3c3c3;
  display: flex;
  flex-direction: column;
  margin-top: 5px;
  margin-bottom: 5px;
}

.item.is-active>.itemName {
  background-color: red;
}

.item:hover {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
  </li>
  <li class="item" onclick="select(event)">
    <span class="itemName">Parent</span>
    <ol>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
      <li class="item" onclick="select(event)">
        <span class="itemName">Children</span>
      </li>
    </ol>
  </li>
</ul>