目标与母公司之间的同等级和儿童CSS只有第一个直接匹配

问题描述 投票:0回答:2

我不知道,如果标题是那种混乱,但这个片段将更好地解释它。

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这个?而无需增加这么多额外的课程?在我的情况,无论是家长和孩子们共享同一样式列表项。

我想使用:不是()?但这需要补充一点像孩童另一个额外的类。有没有其他的方式来解决这个问题?

谢谢。

javascript jquery css
2个回答
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>

1
投票

使用.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>
© www.soinside.com 2019 - 2024. All rights reserved.