Как сделать фиксирующие подчеркивание?

Question

Всем привет! Такая проблема, что не могу зафиксировать нижнее подчеркивание. На css сделал нижнее подчеркивание с помощью before. Все работает. Но мне нужно, чтоб при клике на этот элемент списка, подчеркивание фиксировалось.

.m-cat ul{
    padding: 0;
}
.m-cat li{
    padding: 10px 0;
    position: relative;
    cursor: pointer;
}
.m-cat li::before{
    content: "";
    height: 1.5px;
    background: #999;
    width: 0;
    position: absolute;
    bottom: 0;
    left:0;
    transition: .2s ease;
}
.m-cat li:hover::before{
    width: 100%;
}

<aside class="m-cat">
    <nav>
        <ul id="m-cat-ul">
            <li data-url="/">Все товары</li>
            <li>Электроника</li>
            <li>Дом</li>
            <li>Автотовары</li>
            <li>Спорт и развлечения</li>
        </ul>
    </nav>
</aside>

Я попробовал добавить класс с помощью js, к элементу списка, но выглядит не очень. Как уже при клике удалить прежние свойства? Код:

    let list = document.getElementById('m-cat-ul');
    list.addEventListener('click',(event)=>{
    	let item = event.target;
    	item.classList.add('m-cat-li__active');
    })

    .m-cat ul{
    	padding: 0;
    }
    .m-cat li{
    	padding: 10px 0;
    	position: relative;
    	cursor: pointer;
    }
    .m-cat li::before{
    	content: "";
    	height: 1.5px;
    	background: #999;
    	width: 0;
    	position: absolute;
    	bottom: 0;
    	left:0;
    	transition: .2s ease;
    }
    .m-cat li:hover::before{
    	width: 100%;
    }
    .m-cat-li__active{
    	border-bottom: 1.5px solid #999;
    }

<aside class="m-cat">
  <nav>
    <ul id="m-cat-ul">
    	<li data-url="/">Все товары</li>
    	<li>Электроника</li>
    	<li>Дом</li>
    	<li>Автотовары</li>
    	<li>Спорт и развлечения</li>
    </ul>
  </nav>
</aside>

Answer 1

document.getElementById('m-cat-ul').addEventListener('click', function(e) {
  if( !e.target.matches('li') ) return;
  
  let active = this.querySelector('.m-cat-li__active');
  // this ссылается на объект, в контексте которого вызвана функция.
  // здесь, это 'm-cat-ul'

  if( active ) active.classList.remove('m-cat-li__active');
  
  e.target.classList.add('m-cat-li__active');
});

.m-cat ul {
  padding: 0;
}

.m-cat li {
  padding: 10px 0;
  position: relative;
  cursor: pointer;
}

.m-cat li::before {
  content: "";
  height: 1.5px;
  background: #999;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: .2s ease;
}

.m-cat li:not(.m-cat-li__active):hover::before {
  width: 100%;
}

.m-cat-li__active {
  border-bottom: 1.5px solid #999;
}

<aside class="m-cat">
  <nav>
    <ul id="m-cat-ul">
      <li data-url="/">Все товары</li>
      <li>Электроника</li>
      <li>Дом</li>
      <li>Автотовары</li>
      <li>Спорт и развлечения</li>
    </ul>
  </nav>
</aside>

P.s. а у стрелочных функций нет своего this) Поэтому не стоит везде их использовать. Они задуманы именно для коротеньких функций из одной-двух строчек.

БЛОГ НА HUSL

Как сделать фиксирующие подчеркивание?

Ответы (1 шт):