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

Question

我有一个列表，我想为点击后选中的项目添加效果。例如，当我点击第一个项目“Complémentaire forfait”时，我想看到一个效果，以了解从列表中选择了哪个项目。

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

<div data-toggle="collapse" data-target="#architect" aria-expanded="false" aria-controls="collapseExample">
  <a class="mdc-list-item" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
    <i class="architect_aarrow material-icons" style="margin-right:10px">
   add_circle_outline
   </i>Architectes, Ingénieurs et Techniciens
  </a>
</div>
<div class="collapse" id="architect" style="margin-left:6px">
  <nav id="icon-with-text-demo" class="mdc-drawer__content mdc-list" style="width:100%">
    <a class="mdc-list-item" tauxPlafonds="CPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
      Complémentaire forfait
      </a>
    <a class="mdc-list-item" tauxPlafonds="PLACPAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
      Plafonds complémentaire
      </a>
    <a class="mdc-list-item" tauxPlafonds="IDAIT" data-toggle="tooltip" data-placement="top" title="Acceuil" style="cursor:pointer;width:350px">
      Invalidité décès
      </a>
  </nav>
</div>

我的文件 js :

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

我的CSS:

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

Answer 1

您只需声明一个 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 class 在项目没有它时添加参数中的类，并在它有时删除它。

$('.mdc-list-item').on("click",function(){
    var isClicked = $(this).hasClass("list-item-clicked"); // am I clicked?
    $('.mdc-list-item').removeClass("list-item-clicked");  // un-click everything
    if(!isClicked)
        $(this).toggleClass("list-item-clicked"); // click me if needed
})

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class='mdc-list-item'>First title</a><br/>
<a class='mdc-list-item'>Second title</a><br/>
<a class='mdc-list-item'>Third title</a><br/>