我不知道,如果标题是那种混乱,但这个片段将更好地解释它。
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这个?而无需增加这么多额外的课程?在我的情况,无论是家长和孩子们共享同一样式列表项。
我想使用:不是()?但这需要补充一点像孩童另一个额外的类。有没有其他的方式来解决这个问题?
谢谢。
在每个元素删除全局事件属性。调整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>
使用.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>