Question

我有一个列表，我想为单击后选择的项目添加效果。例如，当我单击第一个项目“ Forfit 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;
}

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

一个实现可能看起来像这样：

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

您可以将点击侦听器添加到css类“ mdc-list-item”的所有项目中，并切换特定项目的类。
Toggle类在该项目尚不存在时在参数中添加该类，并在该项目存在时将其删除。

$('.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/>

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

1 个答案: