如何解决如何仅在所选列表项上创建jQuery Toggle
我有一个带有默认活动班级的列表。当我单击“选择我”按钮时,我希望活动班级更改为被单击的那个li中的那个按钮,并删除上一个班级。
它确实这样做,但是它也在每个列表项上添加了活动类。
我如何才能仅在单击按钮的位置上切换班级?
不确定我的CSS是否正确,还是可以通过jQuery完成?
这是一个演示: https://jsfiddle.net/capymq5j/1/
$('.select-offer').on('click',function(e) {
// $('.button-group').not(this).removeClass('inactive').addClass('active');
// $(this).addClass('active').removeClass('inactive');
$('.button-group').toggleClass("active nothng");
// $(".button-group").removeClass("active");
// $(this).find(".button-group").toggleClass("active");
e.preventDefault();
});
.button-group {
& .cta {
display: none;
}
}
.button-group.active {
& .cta {
display: block;
}
& .select-offer {
display: none;
}
}
ul,li {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid grey;
padding: 10px;
margin: 20px 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="button-group active">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
</ul>
解决方法
使用相对于this
的DOM导航。因此,$(this).closest(".button-group")
仅选择包含单击按钮的按钮组。
您可以从所有按钮中删除active
类,然后将该类添加到所选元素中。
$('.select-offer').on('click',function(e) {
$('button-group').removeClass('active').addClass('nothing');
$(this).closest('.button-group').addClass('active').removeClass('nothing');
e.preventDefault();
});
.button-group {
& .cta {
display: none;
}
}
.button-group.active {
& .cta {
display: block;
}
& .select-offer {
display: none;
}
}
ul,li {
list-style-type: none;
}
li {
display: inline-block;
border: 1px solid grey;
padding: 10px;
margin: 20px 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="button-group active">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
</ul>
,
$('.select-offer').on('click',function(e) {
$(this).parent().toggleClass("active");
e.preventDefault();
});
.button-group .cta {
display: none;
}
.button-group.active .cta {
display: block;
}
.button-group.active.select-offer {
display: none;
}
ul,li {
list-style-type: none;
}
ul{display:flex;}
li {
display: inline-block;
border: 1px solid grey;
padding: 10px;
margin: 20px 12px;
height:100%;
}
.button-group{
height:100%
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
<li>
<div class="button-group">
<a href="#" class="select-offer">Select me</a>
<a href="#" class="cta">cta 1</a>
<a href="#" class="cta">cta 2</a>
</div>
</li>
</ul>
请尝试此操作
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。