我已经仔细查看了搜索,但无法为我的问题找到具体的解决方案。我有以下代码:
$('.filter li a').on('click', function(event){
event.preventDefault();
var $self = $(this);
var $this = $(this).parent();
if($this.hasClass('active')) {
return;
}
$self.closest('ul').children().removeClass('active');
$self.parent().addClass('active');
$container.shuffle( 'shuffle', $this.data('group') );
});
我现在想删除这一行:
$self.closest('ul').children().removeClass('active');
目标应该是,我可以选择多个项目而不只是一个类别#34;活跃"。 有什么想法吗?
非常感谢。
访客来到页面和点#34;显示全部"被标记。 不,他应该可以从四个选项中选择" A3,A4,Farbe,S / W"。使用当前代码,它可以同时选择一个。但我需要能够同时选择更多。
这里是HTML代码:
<div class="filter">
<ul>
<li class="active" data-group="all"><a href="#">Show All</a></li>
<li data-group="a3" class=""><a href="#">A3</a></li>
<li data-group="a4" class=""><a href="#">A4</a></li>
<li data-group="farbe" class=""><a href="#">Farbe</a></li>
<li data-group="s-w" class=""><a href="#">S/W</a></li>
</ul>
</div>
已于2016年3月17日添加: 有5个菜单点。第一个是&#34;显示所有&#34;。当点击其他4个点(A3,A4,Farbe,S / W)中的一个时,第一个(全部显示)应该松开课程&#34;活动&#34;并且点击的新单元应该得到类&#34;活动&#34;。如果再次&#34;显示全部&#34;单击此按钮,只有此菜单点应具有类&#34;活动&#34;。
每个菜单点都有一个数据组。要点&#34; Show-All&#34;有data-group =&#34; all&#34;。因此,如果单击此菜单点,则只应激活此数据组。如果菜单指向&#34; A3&#34;单击,数据组=&#34; A3&#34;应该是活跃的。如果还是&#34; A4&#34;单击,此数据组也应处于活动状态。同样的,如果&#34; A4&#34;再次单击,类=&#34;活动&#34;应该删除数据组=&#34; A4&#34;。当&#34;显示全部&#34;再次单击,应删除所有数据组,只删除data-group =&#34; all&#34;应该是活跃的。
答案 0 :(得分:0)
用户&#34;通常&#34;期望在按住 Shift 键时选择多个条目,因此您可以将该行修改为:
if (!event.shiftKey) {
$self.closest('ul').children().removeClass('active');
}
所以现在你仍然会一次选择一个项目,直到你按住 Shift 键。
答案 1 :(得分:0)
因此,如果你不想删除所有类,那么只需在当前点击它上面切换它。
$('.filter li a').on('click', function(event) {
$(this).parent().toggleClass("active");
});
&#13;
.active { background-color: green; }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
<ul>
<li class="active" data-group="all"><a href="#">Show All</a></li>
<li data-group="a3" class=""><a href="#">A3</a></li>
<li data-group="a4" class=""><a href="#">A4</a></li>
<li data-group="farbe" class=""><a href="#">Farbe</a></li>
<li data-group="s-w" class=""><a href="#">S/W</a></li>
</ul>
</div>
&#13;