Как добавить эффект, чтобы узнать выбранный элемент в списке

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 "и переключить класс определенного элемента.
Переключить класс добавляет класс в параметр, если элемент еще не имеет его, и удаляет его, когда он есть.

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