Javascript 如何添加效果以了解列表中的选定项

我有一个列表，我想在单击后为所选项目添加效果。例如，当我单击第一个项目“Complémentaire forfait”时，我希望看到一个效果，以知道从列表中选择了哪个项目

这是我的HTML。我想知道我是否可以用Javascript或jQuery做我想做的事情

添加_圆_轮廓
建筑师、工程师和技术人员
福菲公寓
门泰广场酒店
残疾人士

您只需声明如下css规则：

.list-item-clicked{
    border: 1px solid black;
}

然后在列表项中添加一个点击侦听器，并在点击时添加或删除项目的css样式。
通过jQuery，您可以使用toggleClass函数。

实现可以如下所示：

$(".mdc-list-item").on("click", function(){
      $( this ).toggleClass("list-item-clicked");
})

在这里，您可以使用css类“mdc list item”将单击侦听器添加到所有项目中，并切换特定项目的类。
Toggle类在参数中添加类（如果该项尚未包含该类），并在包含该类时将其删除

$（'.mdc列表项'）。在（“单击”，函数（）上）{
var isClicked=$（this）.hasClass（“单击列表项”）；//我被单击了吗？
$（'.mdc列表项'）.removeClass（“单击列表项”）；//取消单击所有内容
如果（！isClicked）
$（this）.toggleClass（“单击列表项”）；//如果需要，单击我
})

。已单击列表项{
边框：1px纯黑；
}

第一个标题

第二个标题

第三个标题

请注意，“Accueil”是这样拼写的，而不是“Accueil”-只是说请更新您的代码片段，因为结果无法正确显示。据我所知，您可以在单击事件时添加动态类。在我的示例中，“单击的列表项”是包含项目“架构师”或“否”的div的id？？不，您不需要手动将该类添加到您的div中，您只需让代码保持现在的状态即可。只需将css规则添加到css文件中，将js函数添加到js文件中即可。该函数将自动将css类添加或删除到单击的标记中。@KaiLeßmeister I修复了javascript中缺少的右括号，并将代码段添加到answer@mecab1995您在第一个jquery中漏掉了一个点search@mecab1995&KeiLeßmeister我编辑了该片段，因此一次只能“选择”一个标题