Javascript 在jquery中切换更改列表

我有一个代码，其中有两个列表。这有助于通过单击箭头按钮使列表项向右或向左移动。我想对其进行更改，以便在单击

ul

>body时将活动类一次切换为列表中的一项。当项目转到右侧时，其活动类将被删除。目前，您可以在列表中选择多个项目

我在这个JS和jQuery中做了各种更改，但没有得到预期的结果

$（函数（）{
$（'body'）。在（'click'，'list group.list group item'，函数（）上{
$（this.toggleClass（'active'）；
});
$（'.list arrows button'）。单击（函数（）{
var$按钮=$（此），
活性=“”；
if（$button.hasClass（'move-left'））{
actives=$（'.list right ul li.active'）；
actives.clone（）.appendTo（'.list left ul'）；
actives.remove（）；
}else if（$button.hasClass（'move-right'））{
actives=$（'.list left ul li.active'）；
actives.clone（）.appendTo（'.list right ul'）；
actives.remove（）；
}
});
$（'.dual list.selector'）。单击（函数（）{
var$checkBox=$（此项）；
if（！$checkBox.hasClass（'selected'））{
$checkBox.addClass（'selected'）。最近（'.well'）。find（'ul li:not（.active'））。addClass（'active'）；
$checkBox.children（'i'）.removeClass（'glyphicon-unchecked'）.addClass（'glyphicon-check'）；
}否则{
$checkBox.removeClass（'selected'）。最近（'.well'）。find（'ul li.active'）。removeClass（'active'）；
$checkBox.children（'i'）.removeClass（'glyphicon-check'）.addClass（'glyphicon-unchecked'）；
}
});
$（'[name=“SearchDualList”]'）。键控（函数（e）{
var代码=e.keyCode | | e.which；
如果（代码=='9'）返回；
if（code=='27'）$（this）.val（null）；
var$rows=$（this）.closest（'.dual-list'）.find（'.list-group-li'）；
var val=$.trim（$（this.val（））.replace（/+/g'，）.toLowerCase（）；
$rows.show（）.filter（函数（））{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text.indexOf（val）；
}).hide（）；
});
});
.dual list.list组{
边缘顶部：8px；
}
李先生，
.右列李{
光标：指针；
}
.列表箭头{
填充顶部：100px；
}
.列表箭头按钮{
边缘底部：20px；
}




Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭


Cras justo odio
Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭

您还需要
删除同级的类


$（函数（）{
$（'body'）。在（'click'，'list group.list group item'，函数（）上{
$（this.toggleClass（'active'）.sides（）.removeClass（'active'）；
});
$（'.list arrows button'）。单击（函数（）{
var$按钮=$（此），
活性=“”；
if（$button.hasClass（'move-left'））{
actives=$（'.list right ul li.active'）；
actives.clone（）.appendTo（'.list left ul'）；
actives.remove（）；
}else if（$button.hasClass（'move-right'））{
actives=$（'.list left ul li.active'）；
actives.clone（）.appendTo（'.list right ul'）；
actives.remove（）；
}
});
$（'.dual list.selector'）。单击（函数（）{
var$checkBox=$（此项）；
if（！$checkBox.hasClass（'selected'））{
$checkBox.addClass（'selected'）。最近（'.well'）。find（'ul li:not（.active'））。addClass（'active'）；
$checkBox.children（'i'）.removeClass（'glyphicon-unchecked'）.addClass（'glyphicon-check'）；
}否则{
$checkBox.removeClass（'selected'）。最近（'.well'）。find（'ul li.active'）。removeClass（'active'）；
$checkBox.children（'i'）.removeClass（'glyphicon-check'）.addClass（'glyphicon-unchecked'）；
}
});
$（'[name=“SearchDualList”]'）。键控（函数（e）{
var代码=e.keyCode | | e.which；
如果（代码=='9'）返回；
if（code=='27'）$（this）.val（null）；
var$rows=$（this）.closest（'.dual-list'）.find（'.list-group-li'）；
var val=$.trim（$（this.val（））.replace（/+/g'，）.toLowerCase（）；
$rows.show（）.filter（函数（））{
var text=$（this.text（）.replace（/\s+/g'，）.toLowerCase（）；
return！~text.indexOf（val）；
}).hide（）；
});
});
.dual list.list组{
边缘顶部：8px；
}
李先生，
.右列李{
光标：指针；
}
.列表箭头{
填充顶部：100px；
}
.列表箭头按钮{
边缘底部：20px；
}




Dapibus ac设施在
Morbi leo risus
Porta ac concetetur ac
eros的前庭


$('body').on('click', '.list-group .list-group-item', function() {
  $(this).toggleClass('active').siblings().removeClass('active');
});